CSS animation tutorial: keyframes and animation properties

In an earlier article you saw how to build simple animations with the CSS transition property, moving a property from one value to another with CSS3 transitions. CSS3 transitions, however, give you very little control over how the animation progresses over time.

The CSS animation property, for its part, lets you build animations from keyframes (the @keyframes rule).

Creating CSS3 animations

CSS animations are built on keyframes, which let you specify how CSS properties change over time, much like Flash animations did.

The first step in building a CSS animation is to define the individual keyframes and give the animation a name by declaring a @keyframes rule.
The second step is to reference those keyframes by name with the animation-name property, then add the animation-duration property and any other optional animation properties that control how the animation behaves.

You do not have to write the whole keyframes rule before referencing or applying it.

The example below shows how to animate a <div> horizontally from one position to another with the CSS animation property.

See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

Two properties are mandatory for anything to happen: animation-name and animation-duration (greater than 0). Every other animation property is optional, since their default values do not stop an animation from running.

Note: not every CSS property is animatable. As a rule, any CSS property that takes numbers, lengths, percentages or colours as values can be animated.

Defining the keyframes

Keyframes are where you set the values of the animation properties at the various stages of the animation. They are written with a dedicated CSS at-rule – @keyframes. The selector of a keyframe rule is a percentage (%) or one of the keywords from (0%) or to (100%). That selector says where the keyframe sits within the duration of the animation.

The percentages are a share of the animation duration. 0% is the starting point, 100% the finish, 50% the midpoint, and so on. In other words, a keyframe at 50% of a 2-second animation lands 1 second in.

See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

The animation shorthand property

There are a lot of properties to keep track of when you build an animation. You can also set them all through a single property to keep the code short.

The animation property is a shorthand that sets every individual animation property at once, in the order shown. For example:

See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

Note: if a value is missing or left unspecified, the default value of that property is used instead. In other words, if the animation-duration value is missing, nothing happens at all, because its default value is 0.

CSS3 animation properties

The table below is a quick overview of every CSS animation property involved in an animation.

Property	Description
animation	A shorthand property that sets every animation property in a single declaration.
animation-name	Specifies the name of the @keyframes animations to apply to the selected element.
animation-duration	Specifies how many seconds or milliseconds one cycle of the animation takes to complete.
animation-timing-function	Specifies how the animation progresses over each cycle, in other words the easing functions: ease-in, ease-out and so on.
animation-delay	Specifies when the animation starts.
animation-iteration-count	Specifies how many times an animation cycle is played before it stops.
animation-direction	Says whether the animation is played in reverse on alternate cycles.
animation-fill-mode	Specifies how a CSS animation applies styles to its target before and after it runs.
animation-play-state	Specifies whether the animation is running or paused.
@keyframes	Specifies the values of the animation properties at different points in the animation.