Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance.

Compatibility

-webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+
@-webkit-keyframes
animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+
@keyframes

Not supported by Firefox prior to version 5, Internet Explorer prior to version 10, Opera prior to version 12 and Opera Mini. For detailed compatibility info see caniuse.com.

Firefox 16+Safari 5+, Chrome 10+Internet Explorer 10+Opera 12.1+
iOS 3.2+Android 4+Blackberry 7+IE Mobile 10+

General description

Animation properties

Multiple animations can be specified comma separated. There is also the possibility for separated notations within the source code of a web design.

animation: 1 animationName 2 4s 3 linear 4 1.5s 5 infinite 6 alternate 7 none

1. The name of the animation as specified at the keyframes. Many of the available CSS properties can be animated. If set to none no animation is executed.
2. The duration of the animation, in this case it lasts 4 seconds. Defaults to 0 meaning that there is no animation at all (which is actually senseless). Negative values are not allowed.
3. Optional. The timing-function, which describes how the animation will proceed over its duration. It applies to every single keyframe and not the whole animation and is specified using a bezier curve (and can also be set as one). In the current case the animation is played linear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands for an acceleration at the beginning and a slowdown at the end.There is also the possibility of step-values, which let the animation jump between the individual keyframes instead of a smooth transition. For example to get an animation with 8 frames, you can use steps(8) (example).
4. Optional. The animation starts with a delay of 1.5 seconds. If not set or set to 0 the animation will begin immediately, if negative it will begin part-way through its play cycle.
5. Optional. The iteration-count defines how often the animation is played. The default value is 1, meaning that it will play from the beginning to the end once. A value of infinite makes the animation to run forever, decimal values cause it to end in between its play cycle.
6. Optional. The direction of the animation. If set to alternate every second iteration of the animation is played back to front. Defaults to normal, meaning that every play cycle starts from the beginning.
7. Optional. The fill mode. If set to forwards, the last keyframe remains at the end of the animation, as far as the iteration-count (5) is uneven. If set to backwards and a delay (4) is specified likewise, the first keyframe is shown at the start of the animation instead of the normal appearance of the element. both combines these two value, the standard value none omits them.

 

Keyframes

@keyframes 1animationName {
20% {top: 0px}
333% {top: 50px; 4animation-timing-function: ease-out}
5100% {top: 100px; left: 10px}
}

1. The name of the animation. Links the keyframes to the animation itself and must be the same as 1 at the animation properties.
2. A keyframe (as well as 3 and 4). Consists on one side of a percentage value which determines the placement of the keyframe in the animation -, as well as one or more CSS properties and values that define the state of the animation connectors at this point.In this case its the starting point of the animation, since it has a percentage value of 0 (can also be defined by the keyword from). At this point the top position of the element is 0px.
3. Optional. At 33% of the animations time the element is at a top position of 50px, which brought it a bit downwards.
4. Optional. Additionally it is possible to set a timing-function per keyframe which overwrites the general timing function set at 3 at the animation properties. Also takes the same values.
5. The end of the animation. Its also possible to use the keyword to instead of 100%. Finally the top value of the element changes to 80px, moving it further down. Furthermore it has adopted a left position of 10px which moved it a bit right.

 

Separated notations

Sets the same animation properties like above.

• animation-name: animationName
• animation-duration: 4s
• animation-timing-function: linear
• animation-delay: 1.5s
• animation-iteration-count: infinite
• animation-direction: alternate
• animation-fill-mode: none

 

Example

Two animations specified at once

animation: 1 changeColor 3s infinite, 2 changeSize 2s ease-in 1s infinite
Toggle highlighting
3@keyframes changeColor {
0% {
background-color: red;
border-color: black;
}
100% {
background-color: green;
border-color: yellow;
}
}
4@keyframes changeSize {
0% {transform: scale(1)}
65% {transform: scale(1.2)}
100% {transform: scale(1.4)}
}

1. The first animation for the element has a duration of 3 seconds for each iteration and repeats infinitely. Since there is no timing-function set it defaults to linear.
2. The second animation lasts 2 seconds and has a timing-function of ease-in (smooth acceleration at the beginning, no slowdown at the end). It starts after a delay of 1 second and together with the duration of 2 seconds it also last 3 seconds.
3. The keyframes for the first animation: The element starts with a background-color of red as well as a border-color of black and finishes with a background-color of green and a border-color of yellow at the end.
4. The keyframes for the second animation, which starts at the original size of the element, adopts 1.2 times the size at 65% and ends with 1.4 times the size.

 

Blinking animation

animation: 1 blink 1s step-end infinite

2@keyframes blink {
0% {background-color: blue}
50% {background-color: black}
}

1. One iteration of the animation lasts one second and changes immediately between its keyframes without a transition. It runs infinitely.
2. The background-color changes from blue to black.

 

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).