Skip to content

Instantly share code, notes, and snippets.

@wchargin

wchargin/animate-in-lch.html

Created March 30, 2025 07:17
Show Gist options
  • Save wchargin/9f768b33ac6af29802008315c5af9cc9 to your computer and use it in GitHub Desktop.
Save wchargin/9f768b33ac6af29802008315c5af9cc9 to your computer and use it in GitHub Desktop.
Download ZIP
animate colors through a perceptual color space
Raw
animate-in-lch.html
<!DOCTYPE html>
<style>
@property --fac {
syntax: "<percentage>";
initial-value: 0%;
inherits: true;
}
html,
body {
height: 100%;
}
body {
background-color: color-mix(in oklch, blue, red var(--fac));
animation: fac 5s linear infinite;
}
@keyframes fac {
0% {
--fac: 0%;
}
100% {
--fac: 100%;
}
}
</style>
@wchargin
Copy link
Author

wchargin commented Mar 30, 2025 •
edited
Loading

demo: navigate to:

data:text/html;,%3C%21DOCTYPE%20html%3E%3Cstyle%3E%40property%20--fac%7Bsyntax%3A%22%3Cpercentage%3E%22%3Binitial-value%3A0%25%3Binherits%3Atrue%7Dbody%2Chtml%7Bheight%3A100%25%7Dbody%7Bbackground-color%3Acolor-mix%28in%20oklch%2C%2300f%2Cred%20var%28--fac%29%29%3Banimation%3Afac%205s%20linear%20infinite%7D%40keyframes%20fac%7B0%25%7B--fac%3A0%25%7D100%25%7B--fac%3A100%25%7D%7D%3C%2Fstyle%3E

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment