Animating with CSS Variables

ARANK

There are some really impressive and amazing examples of using CSS Variables in animation out there, like this single div accordion or this sunrise/sunset scene. How could you not want to give CSS Variables a spin in your own animation after seeing things like that? Here are 4 ways CSS Variables can be helpful for animation even if you’re not making fancy demos like these.The key to what makes them so useful (and different from things like Sass variables) is how they can be updated and altered dynamically (with JavaScript or CSS!),and the fact that they follow the CSS cascade. Here’s a bit more on how CSS Variables can make your CSS animations more dynamic and flexible:Setting CSS Variables with JavaScriptCSS Variables are super easy to update via JavaScript, which makes triggering CSS animation on JavaScript events even simpler.One line is all it takes to update a CSS Variable directly from JavaScript.Once the CSS Variable is created in your CSS:li {background: hsl(var(--hue), 80%,…