tnarla/about.html

## about.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Two</title>
    <style>
      .colors {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .color {
        position: absolute;
        inset: 0;
        animation-name: fill;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        transform: translateY(0%);
      }

      .blue {
        height: 100vh;
        width: 100%;
        z-index: 3;
        background-color: blue;
      }

      .yellow {
        height: 100vh;
        width: 100%;
        z-index: 2;
        background-color: yellow;
        animation-delay: 100ms;
      }

      .red {
        height: 100vh;
        width: 100%;
        z-index: 1;
        background-color: red;
        animation-delay: 200ms;
      }

      @keyframes fill {
        0% {
          transform: translateY(0%) ;
        }
        100% {
          transform: translateY(-100%);
        }
      }
    </style>

    <script></script>
  </head>
  <body>
    <div>Page two</div>
    <div class="colors">
      <div class="color blue"></div>
      <div class="color yellow"></div>
      <div class="color red"></div>
    </div>
  </body>
</html>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>One</title>
    <style>
      .colors {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .color {
        height: 100%;
        width: 100%;
        position: absolute;
        inset: 0;
        animation-name: fill;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        transform: translateY(100%);
        animation-play-state: paused;
      }

      .red {
        background-color: red;
      }

      .yellow {
        z-index: 2;
        background-color: yellow;
        animation-delay: 100ms;
      }

      .blue {
        z-index: 3;
        background-color: blue;
        animation-delay: 200ms;
      }


      @keyframes fill {
        0% {
          transform: translateY(100%);
        }
        100% {
          transform: translateY(0%);
        }
      }

    </style>

    <script>
      function handleClick(e) {
        e.preventDefault();
        const colors = document.querySelectorAll(".color");
        colors.forEach((color, i) => {
          color.style.animationPlayState = "running";
        });
        const lastColor = colors[colors.length - 1];

        lastColor.addEventListener("animationend", () => {
          setTimeout(() => {
            window.location = e.target.href;
          }, 500);
        });
      }
    </script>
  </head>


  <body>
    <div>Page one</div>
    <a href="./about.html" onclick="handleClick(event)">Go to page two</a>
    <div class="colors">
      <div class="color red"></div>
      <div class="color yellow"></div>
      <div class="color blue"></div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Two</title>
	<style>
	.colors {
	position: absolute;
	inset: 0;
	pointer-events: none;
	}

	.color {
	position: absolute;
	inset: 0;
	animation-name: fill;
	animation-duration: 500ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	transform: translateY(0%);
	}

	.blue {
	height: 100vh;
	width: 100%;
	z-index: 3;
	background-color: blue;
	}

	.yellow {
	height: 100vh;
	width: 100%;
	z-index: 2;
	background-color: yellow;
	animation-delay: 100ms;
	}

	.red {
	height: 100vh;
	width: 100%;
	z-index: 1;
	background-color: red;
	animation-delay: 200ms;
	}

	@keyframes fill {
	0% {
	transform: translateY(0%) ;
	}
	100% {
	transform: translateY(-100%);
	}
	}
	</style>

	<script></script>
	</head>
	<body>
	<div>Page two</div>
	<div class="colors">
	<div class="color blue"></div>
	<div class="color yellow"></div>
	<div class="color red"></div>
	</div>
	</body>
	</html>