Skip to content

Instantly share code, notes, and snippets.

@tomwhoiscontrary
Created May 12, 2021 20:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomwhoiscontrary/f3f6c1b7c5f7bc4cc9d4231249e15b92 to your computer and use it in GitHub Desktop.
Save tomwhoiscontrary/f3f6c1b7c5f7bc4cc9d4231249e15b92 to your computer and use it in GitHub Desktop.
Demo of (ab)using CSS animations to apply a (non-animated!) colour scale
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes colour-scale {
0% {
background-color: red;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}
.colour-coded {
animation: colour-scale 2s linear 1;
animation-fill-mode: both;
animation-play-state: paused;
}
</style>
</head>
<body>
<ul>
<li class="colour-coded" style="animation-delay: calc(-1.0s - 1s);">Cold</li>
<li class="colour-coded" style="animation-delay: calc(-0.5s - 1s);">Cool</li>
<li class="colour-coded" style="animation-delay: calc( 0s - 1s);">Tepid</li>
<li class="colour-coded" style="animation-delay: calc( 0.5s - 1s);">Warm</li>
<li class="colour-coded" style="animation-delay: calc( 1.0s - 1s);">Hot</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment