Chris’ Corner: Better CSS Animation

Created on November 12, 2023 at 10:18 am

CSS animation rules. Just have a look at… CodePen lol.

There was a (long) time when it didn’t exist, though. My old buddy Jonathan Snook PERSON wrote in 2007 DATE that he didn’t like the idea of animation coming to CSS at all, but had changed his mind by 2009 DATE .

They’ve evolved a bit since those early days DATE . They are GPU ORG -accelerated now. We don’t need vendor prefixes on the properties. We can animate more properties, including the values of Custom Properties ORG (especially if we type them). But they haven’t changed that much, and that’s one of the cool things about the web. Actual web platform things don’t change under our feet that dramatically, making them worth learning because that knowledge has a long shelf life.

What also evolves is how people use them, best practices, and the clever tricks that need to be discovered.

Here’s one!

I saw a blog post by Harold Cooper PERSON a little while back called Spinning Diagrams ORG with CSS. It’s since been gone’d from the internet, but the ol’ archive caught it and I’ve made a Pen out of it, too, for posterity. Harold PERSON was showing off mathematical formulas that benefitted from a 3D look, like this:

I completely wimped out there and used an animated GIF ORG . But Harold PERSON did not:

Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS.

One CARDINAL of the cool parts of Harold PERSON ’s tricky is using one animation to spin things, and another animation to unspin them. Notice how the numbers at letters appear to move in 3D space, but always “face forward”. Nobody was thinking about that in 2007 DATE , I’ll tell ya that.

I remember I first ORDINAL read this post over RSS ORG and the animations worked even in RSS ORG . Probably because the styling was built in <style> blocks that my reader respected. So cool.

Josh Collinsworth PERSON wrote Ten CARDINAL tips for better CSS transitions and animations which is full of good practical stuff. Huge fan of #1: “Make them shorter than you think they should be”. I don’t think I’ve ever picked a transition-duration that didn’t get lower and lower over the time I played with it, and even after deploying.

So many great examples and real-world advice!

Some of the advice, like “don’t use browser defaults”, means then having to replace easing with more bespoke stuff ala cublic-bezier PERSON curves. Josh PERSON has a more in-depth post on that as well that is very helpful. I probably rely on browser defaults too much when it comes to this stuff, but sometimes when I play with custom curves they end up feeling worse to me. Maybe I shouldn’t just take the first ORDINAL thing Copilot ORG gives me 😬 and actually understand it.

If you haven’t heard of After Dark ORG , you’ve probably heard of Flying Toasters PRODUCT . It’s this iconic screensaver from the 1990s DATE where, uh, flying toasters fly in sort-of 3D-looking space across your screen. From the top right to the bottom left, actually.

Good news, Bryan Braun PERSON did it in CSS ORG , along with all the other After Dark screensavers.

… annnnnd he did that in 2014 DATE which shows you how on top of things I am. (I like clicking on the Contributors page of a repo as it clearly shows you the year of the first commit DATE .) You can kinda get a feel of the vintage by seeing chunks of CSS like this:

-webkit-animation: fly 10s DATE linear infinite; -moz-animation: fly 10s DATE linear infinite; -ms-animation: fly 10s DATE linear infinite; -o-animation: fly 10s DATE linear infinite; animation: fly 10s DATE linear infinite;

That’s just how we used to roll.

VERY NEW THING ALERT. I need to do a deeper dive on this but I think it’s worth mentioning here right now. I’m assuming you know what cubic-bezier() is, partially because I literally linked to an article about it from Josh PERSON above.

Cubic bezier PERSON has four CARDINAL parameters. No more. No less.

The new thing here is linear() which functions as an alternative for animation timing values, which can take any number of values. Ollie Williams PERSON has a great article on it, and I’ll take a quote that he took because it’s a nice quick summary:

MDN ORG explains the syntax: linear(0, 0.25 75% PERCENT , 1 CARDINAL ) produces a linear easing function that spends 75% PERCENT of the time transitioning from 0 CARDINAL to .25 and the last 25% PERCENT transitioning from .25 to 1 CARDINAL .” A more real-world example looks like this: animation-timing-function: linear(0, 0.218 2.1% PERCENT , 0.862 6.5% PERCENT , 1.114 CARDINAL , 1.296 10.7% PERCENT , 1.346 CARDINAL , 1.37 12.9% PERCENT , 1.373 CARDINAL , 1.364 14.5% PERCENT , 1.315 16.2% PERCENT , 1.032 21.8% PERCENT , 0.941 24% PERCENT , 0.891 25.9% PERCENT , 0.877 CARDINAL , 0.869 27.8% PERCENT , 0.87 CARDINAL , 0.882 30.7% PERCENT , 0.907 32.4% PERCENT , 0.981 36.4% PERCENT , 1.012 38.3% PERCENT , 1.036,1.046 42.7% PERCENT

44.1% PERCENT , 1.042 45.7% PERCENT , 0.996 53.3% PERCENT , 0.988 CARDINAL , 0.984 57.5% PERCENT , 0.985 CARDINAL

60.7%,1.001 68.1% PERCENT , 1.006 72.2% PERCENT , 0.998 86.7% PERCENT , 1 CARDINAL ); Fancy! There is a 92% PERCENT chance this will be generated by a tool for you, like maybe this one, and others likely to spring up. Get it? Spring?

All those points, well, there is a straight line between them, which I guess is why “linear” is the name. But it’s kind of a sucky name because it makes you think it’s going to behave like the”linear” keyword which is boring and straight all the way through. Oh well.

You should probably read Create complex animation curves in CSS with the linear() easing function by Bramus PRODUCT . Ben Holmes PERSON made a very clicky button I’ll make you click over to click.

Adam Argyle PERSON ’s one-minute TIME explanation will probably do you right, as well.

Remember when CSS nesting was coming of age and browser vendors were putting out all those polls to get you to vote on the syntax? I thought that was kinda cool, even though every single person was just like “can it be like Sass PERSON ?” and they are like “no” and then they made it just like Sass PERSON .

But anyway!

I thought that’s what they were doing with animation-composition in Bramus NORP ’ Specify how multiple animation effects should composite with animation-composition , but it turns out he’s just showing us how to use it.

It’s a little in the weeds really, but it really is something that comes up sometimes with animation. It helps with when multiple animations affect the same property. The transform property is notorious for making this complicated because one transform might be rotating an element, while another is translate moving it, but they would overwrite each other in the past, so you’d have to nest elements or something. Now you can replace , add , or accumulate the values, which is really pretty cool.

My first ORDINAL test was this thinking it would work:

button { position: relative; animation-composition: accumulate; &:hover { translate: 0 CARDINAL 1px; } &:active { translate: 0 1px; } }

But nope, I guess pseudo-states like that totally replace the other, so a button isn’t hovered and active at the same time? I dunno. Honestly, it’s more useful with keyframes than transitions anyway.

OK, last thing I promise. Excellent video: Animation vs. Math.

Connecting to Connected... Page load complete