Create cool UI animations with CSS

CSS keyframes are used for complex or repeatable animations. They enable us to define multiple property values to animate between. Keyframe animations can be reused and repeated, unlike CSS transitions.

CSS keyframe animations are defined using the @keyframes syntax. This works much like a media query where we nest elements inside of the @ statement. Inside the keyframe declaration we have two options: we can use the keyword to and from or we can define our timeline using percentages. 

Keyword animations

When the animation we're creating only has two points to animate between, we can use the to and from syntax, in fact we can use just to, providing the original property value is set on the element we're going to be animating.

#record {
  transform: rotate(0deg);
  animation: rotate 1s;
}
@keyframes rotate {
to {
transform: rotate(360deg);
  }
}

Percentage animations

When creating animations where we need to define more than one point to animate, we can use percentages. This enables us to have precise control over our animation.

@keyframes flash {
  25% { opacity: 1; }
  27% { opacity: 0.4; }
  29% { opacity: 1; }
  31% { opacity: 0.4; }
  75% { opacity: 1; }
}

Applying an animation

Animation in CSS has a number of properties we can set in order to have precise control over the playback of our keyframe animations. Some, like animation-duration, animation-delay, animation-iteration-count, animation-play-state and animation-name are all fairly self-explanatory, while some of the other properties can be a little trickier to learn and utilise to their full potential.

animation-timing-function
Timing functions in animation are the same as transitions – we can use either keywords or set a custom timing function by using the cubic-bezier value. Take a look at a full list of timing keywords.

animation-direction
When applying our animations, we have the ability to play them back in a number of ways. The default value is normal, which will play the animation forwards. We can also play the animation in reverse or alternate the animations playing forwards and backwards.

animation-fill-mode
The fill mode value enables us to choose what should happen at the end of an animation to the value that we have changed. For example, setting the value to forwards will keep the property values from the end of the animation, whereas the default value none will return the elements to their original state after the animation has finished.

Animation shorthand

All of the animation properties can be combined into a shorthand statement using the 'animation' property. We are free to omit the values we do not need and want to leave as the default values.

animation: duration || timing-function ||
  delay || 

iteration-count || direction || fill-mode ||
  play-state || name;

animation: 500ms linear infinite flash;

Next page: Learn how to manage the performance of your animations