Transitions & Animations

At this point in the course, you have seen pretty much every major part of CSS. You should be able to create good-looking websites with that and almost any design you envisioned.

Now we get to the details. The flourishes. The nice touches.

And the biggest element in that category is animation.

For example, in the chapter on Pseudo-Classes, we applied a different style when you hovered over a link (as opposed to the link’s regular style). But this change was instantaneous! It happened immediately, with no transition.

Most designs become prettier and more useful when you do animate such changes.

Transition

The easiest way is by using the transition property. It allows you to set CSS properties that should gradually transition when changed, plus how long this change should take.

In other words, it accepts a comma-separated list of <property> <time unit>.

A “time unit” is a number with the unit s (for seconds). For example, 1s means one second.

The example below will take 0.3 seconds (300 milliseconds) to transition, whenever the value of color or font-size is changed.

This works for (almost) any property! As long as you spelled the property name correctly, and provided a time greater than 0, the browser tries to smoothly transition. These days, it only fails on really complex things (such as interpolating between two background-image values.)

On my websites, my links and buttons always have a transition property. My CSS usually changes the color, background-color, scale (with a transform), and shadow (with a filter). A “pop out” effect is usually nice. It’s just one line, but it makes the website interface so much more smooth and polished.

Animation

This is nice, but what if you need more control? What if you want more complex animations, which don’t just change a few properties in a straightforward way?

Then you can open the box called CSS animations.

Now two steps are required.

• Define the animation somewhere.
• Then use it wherever needed.

Define an Animation

To define an animation, use @keyframes <name> {}. You can invent the name yourself, though I recommend something simple and descriptive, in “kebab-case”. (I see many online examples that name animations with camelCase, which is ugly and confusing to me.)

Why “keyframes”? CSS decided to do animation via keyframes, which is generally the most popular method. It works very similar to those “color stops” we discussed in the Gradients chapter.

When the animation plays, it steps through the timeline from 0% to 100%. A keyframe simply says …

• “Hey, I want to happen at THIS moment (e.g. 20%)”
• And here are the new styles I want applied

In syntax, this simply looks like <time> { <styles> }. You can add as many of these keyframes as you want. The order also doesn’t matter, though it’s obviously easiest (for you) to add them in the right chronological order.

The example below creates an animation that changes the background color from black, to red (halfway the animation), to white.

Use a defined animation

Now that you’ve saved this animation under that name, you can use it anywhere!

In most cases, just the first two properties are enough: what animation to play and for how long.

If you add an animation to an element, it starts to play as soon as the styling rules are applied. For example, if you simply add the animation property to every a, then all links will animate as soon as the page finished loading. (You can delay this with the property given above, but that doesn’t really help.)

That’s usually not what you want. You want the animation to happen in response to something. As such, animations are usually …

• Added in pseudo-class selectors (so they only trigger when a certain state or condition is met.)
• Or through regular classes that are added/removed at runtime (by JavaScript).

Timing Functions

By default, an animation moves through time uniformly. The duration between keyframes 10% and 20% is equally long as the duration between keyframes 40% and 50% (for example).

The timing property changes this. For example, you can speed up the animation at the start (moving to 10% in no time), then slow down near the end (suddenly taking twice as long for 10% of the animation).

This is often perceived as more natural and organic. A linear, uniform animation feels too stiff, artificial and boring.

In the example below, try the different easing functions and see what happens. (Whenever you change the code, it refreshes, so the animation wil play again.)

There are more easing functions for even more control. I judged them too complicated and rare to include in this course. As always, check out the CSS documentation for that.

Fill Mode

One final issue that plagues animation (in any medium) is what to do when the animation is not playing.

There are two questions here:

• Which styles should be applied before the first keyframe starts?
• Which styles should be applied after the animation ends?

By default,

• CSS just keeps whatever styling the element already has, until the first keyframe comes around
• When the animation is done, it reverts back to that original styling.

You saw this in the example above. I need to set background-color to make sure it starts on the right one, then when the animation is done, it forgets the final keyframe and returns to that original style.

The animation-fill-mode property can change this. It accepts four values.

• none: the default
• forwards: the first keyframe of the animation is applied as the current style, even before it starts
• backwards: the last keyframe of the animation is maintained, even after the animation ends
• both: both forwards and backwards

In the example below, notice how the circle stays on the right and doesn’t reset back to the left.