Skip to content

Instantly share code, notes, and snippets.

@tnarla
Created November 2, 2023 19:46
Show Gist options
  • Save tnarla/ed43c264a2b0dd1b991b147e612bebf4 to your computer and use it in GitHub Desktop.
Save tnarla/ed43c264a2b0dd1b991b147e612bebf4 to your computer and use it in GitHub Desktop.
Color transition animation
<!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>
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment