Chris’ Corner: Better CSS Animation

By admin
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.