动画介绍页面/背景到下一页

I would like to be able to animate a simple intro page/background to the next page with just CSS or little javascript if needed, with an easy PHP inclusion. When link is clicked it loads all the content: header(menu) / content / footer, which can be called the 'startpage'.

I know how to just put some keyframes animations on the content that is loaded, but i don't want the menu (header) to animate more that first time only the content part. Maybe the best thing to do is to not go to the startpage, but already have it loaded underneath the intro part and animate the intro into the startpage. I read about cubic-bezier with this in mind.

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') ?>