Animations

The CSS Podcast - 022: Animation

Sometimes you see little helpers on interfaces that when clicked, provide helpful information about that particular section. These often have a pulsing animation to subtly let you know that the information is there and should be interacted with. This module shows you how to create those helpers, and other animations, using CSS.

You can use CSS to set an animation sequence with keyframes. These sequences can be basic, one-state animations or complex, time-based sequences.

What is a keyframe?

In most animation tools, keyframes are the mechanism you use to assign animation states to timestamps on a timeline.

For example, here's a timeline for the pulsing "helper" dot. The animation runs for 1 second and has 2 states.

There's a specific point where each of these animation states start and end. You map these out on the timeline with keyframes.

@keyframes

CSS @keyframes are based on the same concept as animation keyframes.

Here's an example with two states:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

The first important part is the custom identifier (custom-ident), the name of the keyframes rule. The identifier in this example is my-animation. The custom identifier works like a function name, letting you reference the keyframes rule elsewhere in your CSS code.

Inside the keyframes rule, from and to are keywords that represent 0% and 100%, which are the start and end of the animation. You could re-create the same rule like this:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

You can add as many positions as you like along the timeframe. In the pulsing helper example, there are two states that translate to two keyframes. This means you have two positions inside your keyframes rule to represent the changes for each of these keyframes.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

The animation properties

To use your @keyframes in a CSS rule, you can either define various animation properties individually, or use the animation shorthand property.

animation-duration

.my-element {
    animation-duration: 10s;
}

The animation-duration property defines how long the @keyframes timeline should be as a time value. It defaults to 0 seconds, which means the animation still runs, but it'll be too quick for you to see. You can't use negative time values.

animation-timing-function

To help recreate natural motion in animation, you can use timing functions that calculate the speed of an animation at each point. Calculated values are often curved, making the animation run at variable speeds over the course of animation-duration, and making the element appear to bounce if the browser calculates a value beyond those defined in @keyframes.

There are several keywords available as presets in CSS, which are used as the value for animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Easing function values appear to curve because easing is calculated using a Bézier curve, a type of function used to model velocity. Each of the timing function keywords, such as ease, references a predefined Bézier curve. In CSS, you can define a Bézier curve directly using the cubic-bezier() function, which accepts four number values: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

These values plot each part of the curve along the X and Y axis.

Understanding Bézier curves is complicated. Visual tools, such as this generator by Lea Verou, are very helpful.

The steps easing function