Four Principles To Level Up Your CSS Animations

Before we get into that, here is a quick background on CSS transitions & animations:

CSS transitions allow you to change CSS property values smoothly over a given duration. One example would be changing the background color of a <div> over a 2-second duration when the mouse hovers over it.

CSS Animations gradually change elements from one style to another. The animation can be repeated a specific number of times or indefinitely. For example, you can make a div “pulse” to draw the users’ attention.

In my eight years of web development, I’ve seen the same CSS properties animated time and time again. Usually, it’s one of these three things:

When you understand that any CSS property can be animated, new opportunities open up. You’ll realize that your imagination is the only thing limiting the user experiences you can build.

While working with CSS animations to build this, I kept coming across the same four principles.

It might take multiple moving parts to get an animation looking just right.

For the animation used to visualize running plays (the simplest animation of them all), it’s actually four animations happening simultaneously:

Notice in the gif above the team logo is also changing, and the white background is pulsing to indicate this particular play includes a turnover.

This effect is achieved by using four different HTML elements, each with its own CSS animations, and then triggering them all simultaneously (by adding a CSS class). Each animation has an animation-delay property to get the timing just right.

Except for the 8 mentioned earlier.

The “pass” animation was a challenge to put together until I realized I could animate any CSS property. The arc and its shadow animation are done by animating the clip-path property like this:

And the drop-in part of “Touchdown” animation animates the text-shadow property so that the height of the text-shadow decreases as the text drops down. This gives the effect of the shadow staying still while the text moves instead of the shadow moving with the text, which would be the default behavior.

I usually feel very strongly against using inline styles, but the one exception to that is when they’re being used for CSS animations. For example, when animating the position of the play indicator on the football field, I used javascript (the football livetracker is a react application) to set inline styles for the X and Y (left and bottom) coordinates with absolute positioning. That, combined with the following CSS, means that anytime a new set of coordinates is calculated in javascript, the play indicator would smoothly animate to that position.

Did you notice this in the gifs in this article? It’s very subtle. Many of the transitions have a satisfying little “snap” to them. Look closely at the following gif and see how the play indicator pops up a tiny bit after dropping down. Or how the shadow also over-expands for a brief second to match.

This is achieved by overshooting the end value of the CSS transition and then snapping back to the final value. It might sound like a hassle, but the implementation is straightforward. One line of CSS to add a cubic-bezier transition timing function will do the trick.

Setting the fourth value in the cubic bezier to be greater than one makes the transition overshoot its end value.

In summary, following these four principles for CSS animations can help make spectacular user experiences.

Related posts:

Barry Van Veen shares how you can install a package from a local path into your project. This is extremely handy when developing a package because you can immediately toy with it in a full…

The manufacturer of premium rolling shutter doors is Reasonable Price Automatic Shutter Door. Supplier of automatic electric rolling shutter doors is our business. Our rolling shutters, which may be…

By the time I was born, my father was 48 years old. He had already been a grandfather, a favored mechanic for a motorcycle club, an independent wrestling promoter, and a bar owner. He was grizzled…