Which web animations are expensive and which are cheap?

You can add a lot of polish to a website or app with animations and transitions. Some animations can be built in two seconds with a single line of code. Others take days, and still others have to be hand-drawn by an actual animator. How do you tell which is which?

Skip to examples of "cheap" animations

(Note to developers: The examples are all simple hand-written SVGs, animated with CSS. Click on an image to open it in a new tab, and then "view source.")

What makes animations "expensive"?

Animation is moving from Point A to Point B.

Let's say I want to animate a button being pushed:

This animation has two frames:

Point A: The button is not pushed in.
Point B: The button is pushed in.

It looks much better when it changes smoothly from Point A to Point B:

This animation has lots of frames:

Point A: The button is not pushed in.
The button is a pushed in a little.
The button is a pushed in a little more.
The button is a pushed in a little more.
The button is a pushed in a little more.
...
Point B: The button is fully pushed in.

If I drew all the frames between Point A and Point B myself, it would take a long time. So I had the computer do it.

Tweening is when computers draw animation frames for you.

CSS, the code that controls how webpages look, is really good at tweening. Here's the CSS I wrote for that animation:

from {
    background: red;
}

to {
    background: brown;
}

CSS filled in all the frames for "darker red, even darker red, still even darker red... brown."

CSS can tween any property that computers store as numbers.

Color, opacity, width, height, position on the page, rotation -- computers store all of those as numbers. CSS can tween them just by adding one number to another number, a bunch of times.

Here's an even better-looking button:

In this example, I used CSS to tween:

The background color
The bottom border width
The top border width
The height

To a computer, those are all just numbers.

But even simple animations are expensive.

How does that button look to you? Good enough to put on your website? Probably not. Maybe your website doesn't use red. Maybe you don't like how the button moves.

If you've tried to add an image to a website, or even a Microsoft Word document, you know that making it look the way you want is hard. Animations are harder, because each animation is a lot of images. Each frame is an opportunity for things to not look the way you want.

If you tell a developer to add a button to a website -- even one that isn't animated at all -- they still need to know:

What color is it?
What shape? A rectangle? A circle? A rectangle with rounded corners?
Does it have a label? What color is the label?
Should it have a shadow or any lighting effects?

If you tell the developer to animate the button being pushed, they need to know a lot more:

Should it start sliding right away, or should there be a delay?
Should it start faster and slow down toward the end? (This is called 'easing' and it involves complex math.)
How much should the color change?
How far "down" should it go?

CSS can do the tweening. But you need to figure out what to tween. Getting to "good enough" takes back-and-forth and trial-and-error. It takes time, and time is money.

"Simple" for you and me is not simple for computers.

This loading animation looks simple, right?

It's just some squares moving around.

That animation is made of 52 frames:

Let's look at what changes between just frame 1 and frame 2. To our eyes, the change looks teeny-tiny. But it would be a pile of work for a CSS developer:

The bottom three squares move a few pixels to the right. They also change shape. They get bigger on the left edge and smaller on the right edge. Then, to give the illusion of perspective, the red square gets smaller, and the green square gets bigger. Then between frames 3 and 4, you start introducing new colored squares on the left and have to do all those same changes for them. Then later on the squares start moving in different directions!

This little animation is far, far too complex for a CSS developer to animate. It was drawn frame-by-frame by an actual animator.

Don't let CSS "art" fool you.

Some web developers like to use CSS to make really complex, beautiful images and animations. Look at this example.

The people who make CSS art are just doing it for fun. That solar flare example is 1368 lines of CSS, coded from scratch. It will make your computer's graphics processor break out in a sweat. This kind of coding is a neat programming challenge, but has no practical value.

Examples of "cheap" animations

Below are some more animations that were pretty easy to make with pure CSS. With each, I've listed the what's being tweened. I want to give you an idea of what you can reasonably expect your developers to create.

You can absolutely add more complex animations to your website. You can use animation technology like Lottie, or even animated GIFs. But you should expect to pay more.