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 JavaScript
CSS 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%, 60%);
}
You can directly alter that variables value with JavaScript:
li.style.setProperty('--hue', 200);
That makes it easier to directly connect CSS Variables to JavaScript variables like mouse position, and even add a bit of randomness to your CSS animations based on calculations done in JS.
See it in action doing some spring physics with CSS transitions in the example below. This really opens up easier ways to connect CSS and JavaScript together to trigger and adapt CSS-based animation based on different input or circumstances. (David Khourshid did a talk at CSS Conf EU that pushes this idea of reactive and dynamic animation even further.)
(Note: best viewed in Chrome because Firefox has some calc() related issues with CSS Variables.)
Quick tip: CSS Variables are also called CSS Custom Properties, and personally I find it easier to think of them as custom properties as they don’t really behave like the kind of variables you might be used to from programming languages.
Even more flexibility with @keyframes
The re-useableness of CSS keyframe animations can be their biggest strength. Bringing CSS Variables into the mix can get you even more flexibility from a single set of keyframes because they can be altered dynamically with CSS too. By establishing some variables with values on a parent container, you can adjust the value of those variables for each individual child element to affect how their @keyframe animation plays out.
In this Pen, all four squares are assigned the same set of keyframes which are affected by each element’s definition of the variables use in the keyframes. (The only thing JS is doing in this one is setting a random hue for each square, the animation is all CSS.)
(If this Pen isn’t working as expected for you, see the browser support note below.)
Making individual transform properties
Sometimes it’s super annoying to have things like translte(), scale() and rotate() all wrapped up in one property. There’s some indication those will become separate properties in the future (It’s behind a flag in Chrome Canary already), but you can have it all now using CSS Variables if you want. Dan Wilson does a great job showing how CSS Variables can help you get around that in this post.
More options for managing responsive animation
Changing animation properties in media queries can be easier to follow when you do them with CSS Variables. Instead of reassigning the property directly, you can adjust the variable (like –dur in the Pen below) which can be much cleaner to read. You could even use them to adjust how far an object is translated directly based on window size with JavaScript.
A short note on browser support
CSS Variables have at least partial support in the current version of all modern browsers, but there are some notable bugs. For example,
calc() doesn’t work with all units in Firefox at the moment and Edge has some issues with page crashing and pseudo elements. Based on that, CSS Variables probably aren’t ready for production work just yet, but that will likely change in the near future.
Where to learn more about CSS Variables
CSS Variables are still pretty new, and they have applications beyond animation uses too. These three posts will get you off to a great start with them:
Locally Scoped CSS Variables: What, How, and Why
Winning with CSS Variables
CSS Variables: Why Should You Care? is also a great read.
This article was written for the UI Animation Newsletter. Subscribe to get weekly UI animation tips and resources straight to your inbox!
