javascript — анимируйте вводную страницу / фон на следующую страницу

Я хотел бы иметь возможность анимировать простую вводную страницу / фон на следующую страницу с помощью всего лишь CSS или небольшого JavaScript, если это необходимо, с легким включением PHP. При нажатии на ссылку загружается весь контент: верхний колонтитул (меню) / контент / нижний колонтитул, который можно назвать «стартовой страницей».

Я знаю, как просто поместить анимацию ключевых кадров в загружаемый контент, но я не хочу, чтобы меню (заголовок) анимировало больше, чем в первый раз, только часть контента. Возможно, лучше всего не заходить на стартовую страницу, но уже загрузить ее под вступительную часть и анимировать вступление на стартовой странице. Я читал о кубическом Безье с учетом этого.

CSS:

a {
color: inherit;
text-decoration: none;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}

.intro {
position: fixed;
display: block;
top: 48%;
left: 50%;
text-align: center;
font-size: 18vw;
color: white;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
}

.bg {
position: fixed;
width: 100vw;
height: 100%;
top: 0;
left: 0;
background: black;
z-index: 1;
}

a:hover + .bg {
background: white;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}

.intro:hover  {
color: black;
}

PHP:

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php') ?>

<a href="/start" class="intro">INTRO TEXT OR LOGO</a>
<div class="bg"></div>

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php') ?>