Hi there - today, we're going to be talking about CSS Animations and the improvements they have undergone over the past few years to make them even more powerful! Sounds crazy right? Read on!

CSS Animations 101

Animations are all about visualizing a state change from a before and after. CSS animations represent this world by having you explicitly define what the before and after states look like via @keyframes style rules. These rules contain the individual keyframes themselves that specify what visuals will change at which point in the animation’s life.

Below is an example of what one @keyframes style rule looks like:

It's a car. It's a plane. No, it's an @keyframes style rule.

These @keyframes rules are paired with the animation property where we define the various non-visual properties of the animation such as the duration, timing/easing function, and more.

We just covered the gist of what CSS animations are. To go a bit more in-depth on them, the Introduction to CSS Animations tutorial goes into more detail.

CSS Animations are Predefined

By explicitly defining the keyframes and what visual changes go in each, our animations get a predefined quality to them. This is not a bad thing. This is no different than creating animations in a traditional timeline-based tool like Adobe Flash/Animate or After Effects where each keyframe defines what our animation looks like at that point:

CSS animations are most like what you can create in timeline-based animation tools!

What does make predefined animations awkward is that they don’t deal with interactivity very well. If you wanted an animation that reacted differently based on a user action, you historically couldn’t rely on CSS animations. They key word being historically…

Custom Properties + CSS Animations = Win!

Custom properties have been around for a long time now. They replicate the reusability power of variables found in languages like JavaScript and bring them into CSS. What makes them relevant for animations is that custom properties can live inside our keyframes.

When the animation runs, it is the value of the custom property that determines what our animation does. When the value of the custom property changes, what happens to the animation that we see? Initially, nothing. The way CSS animations work is that they take the values they are given when they initially start running. They need to be explicitly told to pick up the new values, and the way we do that is…a hack that looks a bit as follows:

The hack is that we restart the animation to have the new custom property values picked up by our animation. Once the animation restarts, though, it is clear sailing where our custom properties control how our animation runs.

This restart trick is something that wasn’t possible, at least not in a cross-browser way across mobile and desktop devices. This restart trick combined with custom properties is the magic one-two trick that allows our CSS animations to be customizable once it starts running.

Why does this matter? This opens the door for more interactive animations that either react to user behavior or do something more random beyond what we were capable of accomplishing with just CSS transitions. For example, we can create an animation as follows where the position of the circle is randomly repositioned each time the animation loops:

The code for creating this animation that shows off many of the tricks we discussed can be seen in this forum post.

Relevant Video of the Moment

Since restarting a CSS animation is a critical part of making these animations customizable with custom properties, it only makes sense that this is the video that you should add to your rotation:

Restarting a CSS Animation

For a bunch more videos on front-end topics, the KIRUPA YouTube channel may be just what you need, so subscribe to be kept in the loop on new content as it gets added.

Conclusion

All right! This marks another installment of our randomly scheduled newsletter on web development topics. Thanks for reading. If you were forwarded this newsletter, please do subscribe if you want more content like this delivered to your inbox.

Lastly, if you ever have ideas for topics you’d like me to consider writing about or just want to chat about anything web development related, drop by the forums…just like it is 1998!

Also, follow me on Twitter if you want more timely bite-sized updates.

Cheers,

Kirupa 🥳