The CSS Animation Property

Using the CSS animation shorthand

By using the CSS animation property, you can animate other properties:

.animated {
    -webkit-animation: go 2s infinite; /* Chrome, Safari, Opera */
    animation: go 2s infinite;  	
}

It is actually a shorthand for eight subproperties:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

We will be explaining each animation subproperty separately in the following sections.

The syntax rules for using the CSS animation property are simple:

animation: name duration timing delay iteration direction fill play;

As you're using the shorthand, there's no need to list the subproperties – you just need to define the values you need. You don't need to use all of the subproperties, but animation-name and animation-duration are necessary for the CSS animation property to work as intended.

Note: for the shorthand to work properly, make sure you list the values in the same order as listed above.

Naming the animation

The CSS animation-name property sets a particular animation to be applied to the chosen element:

.animated {
    -webkit-animation-name: animation; /* Opera, Chrome, Safari */
    animation-name: animation;
}

The syntax for this CSS animation property is simple:

animation-name: value;

The value can be either none which represents no keyframes, or a custom name used to identify the animation. To create one, you can use letters (mind case-sensitivity), numbers, underscores and dashes.

Specifying the duration

To define the length of the animation cycle, use the CSS animation-duration property:

.animated {
    -webkit-animation-duration: 2s; /* Opera, Chrome, Safari */
    animation-duration: 2s;
}

The syntax for CSS animation-duration is simple – you just need to define the preferred duration in seconds:

animation-duration: value;

Note: if you don't define the duration for the animation, it will not run at all, as the default value is 0s.

Manipulating the animation pace

The CSS animation-timing-function defines the pace of your animation:

animation-timing-function: value;

To make the changes smoother, a speed curve is used. If you are familiar with computer graphics, you might already know what a Bezier Curve means. Basically, it is a curve model defined by four points. When writing the animation-timing-function property, you can define custom values for your curve or choose predefined options:

.animated {
    animation-timing-function: ease-out;
}

Another way to define the pace is by using steps:

animation-timing-function: steps(x, term);

In this kind of syntax, x represents the number of steps for the animation. Each of them will be shown for the same amount of time. The term defines the way it behaves:

If you only need to define one step, you can use step-start instead of steps(1, jump-start) and step-end for steps(1, jump-end):

.step-start {
     animation-timing-function: step-start; 
}

.step-end {
     animation-timing-function: step-end;
}

Defining the CSS animation delay

The CSS animation-delay property can be used to specify the delay before an animation starts:

.animated {
    -webkit-animation-delay: 3s; /* Opera, Chrome, Safari */
    animation-delay: 3s;
}

The syntax is very straightforward – you just need to define the CSS animation delay in seconds:

animation-delay: value;

Specifying the number of animation cycles

The CSS animation-iteration-count property defines how many times an animation should normally play:

div {
 animation: myturn 4s;
 animation-iteration-count: 3;
}

The syntax for this property is simple:

animation-iteration-count: value;

You can either define the number of times or use the keyword infinite to make the animation run indefinitely. The default value for this property is 1.

Modifying animation direction

To make a certain animation play in reverse or alternate cycles, use the CSS animation-direction property:

div {
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;
}

To use this property, you need to define one of the four available values:

animation-direction: value;

Note: the Safari browsers does not support reverse and alternate-reverse.

Styling an inactive animation

The CSS animation-fill-mode property is used to set the style for an element while the animation is not active (finished or delayed):

.animated {
    -webkit-animation-fill-mode: both; /* Opera, Chrome, Safari */
    animation-fill-mode: forwards;
}

Typically, animations do not affect the element until they have finished playing. This CSS animation property can override such behavior.

The CSS animation-fill-mode property accepts four values:

animation-fill-mode: value;

Is the animation running?

The CSS animation-play-state property defines whether the animation is running:

animation-play-state: value;

This CSS animation property accepts two values:

Tip: start learning animations with simple ones, such as CSS fade in and CSS fade out. It will also make creating sequences easier.

Browser support

Mobile browser support