`Animation` - Property CSS

animation

Summary of characteristics of the `animation` property

Quick description

Short hand property that defines most animation parameters, such as duration, speed up, number of repetitions, direction, and so on.

Status

Standard

Applies to

All elements

Usable for

HTML

Percentages

Not applicable.

Initial value

See individual properties.

Inherited by default

No.

Animation type

Not animable: the animation property cannot be animated.

Canonical order

Per grammar: serialization in the order of syntax.
Values can be entered in any order. ⁽¹⁾

W3C Module

CSS Animations

References (W3C)

🡇

🡅

CSS Animations Level 2

Document status: WD (Working Draft)

CSS Animations Level 1

Document status: WD (Working Draft)

(1) Except for animation-duration, which must precede animation-delay if the latter is present.

What is a CSS animation?

A CSS animation is the ability to progressively change the value of one or more CSS properties over a given period of time.

Description of the `animation` property.

animation is a shorthand property, which allows, in a single write, to define all the parameters of an animation, that is to say the values for the following properties:

animation-duration : Sets the total duration of an animation cycle.
animation-timing-function : Defines the easing function to be used during an animation.
animation-delay : Waiting time before the animation starts, usually counted from the page load.
animation-iteration-count : Sets the number of times an animation should be played.
animation-direction : Defines the direction of the animation (normal or reverse) with respect to the @keyframes at-rule.
animation-fill-mode : Sets the override when the animation is not running.
animation-play-state : Define the animation status (in progress or paused).
animation-timeline : Associates animation with something other than time, such as scrolling through an element.
animation-name : Specifies which animation (defined by @keyframes) to apply to the element.

Most values are optional; the only two mandatory values are the name and the duration of the animation. However, the number of repetitions is often specified, which is set to 1 by default. The name of the animation and the value for animation-timeline are mutually exclusive.

Whether all the values are present or not, the order in which they are mentioned is important: the name of the animation should come first, and if the duration and delay are specified, the duration should come before the delay.

Like all shorthand properties, animation initializes all values, even those that are not written. The latter are set to their initial value. Therefore, the two statements below are equivalent.


	animation: 3s 5 rotation;


	animation-duration: 3s;
	animation-timing-function: ease;  
	animation-delay: 0s;
	animation-iteration-count: 5;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	animation-name: rotation;

When it comes to reacting to user actions (such as animating a dropdown menu or making a button more appealing), refer instead to the page on the property transition .

Values for `animation`.

animation: my-animation 2s infinite;

This syntax declares that the animation named my-animation should be played for a duration of 2 seconds and repeated indefinitely.
When a single duration value is present, it is associated with the duration of the animation, with the delay set by default to 0 seconds.
animation: my-animation 3s 5s 2;

This syntax declares that one must wait 5 seconds, then play the animation named my-animation for a duration of 3 seconds, and repeat it 2 times.
When two duration type values are present, the first is associated with the duration of the animation, the second with the delay before starting the animation.
animation: my-animation1 3s infinite, my-animation2 5s 1, ...;

This syntax declares several animations. The parameter groups corresponding to each of the animations are separated by a comma. See here for some explanations about multiple animations.
animation: initial; animation: inherit; animation: revert; animation: revertLayer; animation: unset;

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Tutorial: the principle of CSS animations.

Animations allow the evolution of one or more CSS properties from one value to another, progressively. In the example below, it is the width property that evolves between 50% and 100%.

The width property of this block is animated.

CSS also offers transitions (see transition), which also consist of gradually changing a property from one value to another. The difference is as follows:

The animations are autonomous: they run a defined number of times, or indefinitely, as soon as the page is loaded.
Transitions require an external event that changes the value of a property: JavaScript code, user action, etc.

In the examples below, the background color gradually shifts from one color to another. In the case on the left (animation), this color change is automatically triggered and can be replayed indefinitely if desired. Meanwhile, the transition requires the property's value to be changed, here through JavaScript code.

Example of animation

Example of transition

Several types of animation.

Not all properties can be animated, and there are several types of animation. The summary tables at the beginning of the page always provide the type of animation accepted by the property, and whether the property accepts animations.

Properties that accept numerical values or colors can generally be animated gradually (by computed value). Those that only accept predefined values, such as text-align for example, can often be animated but abruptly (discrete), meaning they jump from one value to another without a transition. Some properties cannot be animated, such as those that are involved in defining animations.

How to define an animation?

The first thing to do is to define the animation itself, that is to say what properties need to evolve, and within what limits. This is done with the at-rule @keyframes . In the following example, an animation named "demo1" is defined, which modifies the width property from 50% to 100%.

@keyframes demo1 { from{width:50%;} to{width:100%;} }

Ensuite, l'animation est appliquée à un ou plusieurs des éléments de la page, en définissant la durée, le nombre de répétitions, et éventuellement de nombreux autres paramètres. C'est le rôle de la propriété animation ou des propriétés individuelles équivalentes. This is this animation which is applied on the block above.


	#tutoriel1 {
	   animation: demo1 2s infinite alternate;
	}

Animation can change multiple properties at the same time, here the width and the height of an element:

@keyframes demo2 { from {width:50%; height:100px;} to {width:100%; height:50px;} }

Several steps in an animation.

Animation can also involve several stages: not just a beginning and an end, but intermediate stages defined in percentages. The terms from and to actually correspond to 0% and 100%.

@keyframes demo3 { from {width:50%;} 50% {width:75%;} to {width:100%;} }

Scroll-driven animations.

Classically, CSS animations evolve over time, but it is now possible to associate an animation with the scrolling of a container. See the tutorial on scroll-driven animations.

Multiple animations.

It is possible to define multiple animations on the same element, provided that they are described in a single rule, either a single rule with the property animation or a single rule for each individual property. Indeed, a second rule would overwrite the parameters of the first.

Each of the properties related to animations can then have a series of values separated by commas, each of its values corresponding to one of the animations. How will the browser proceed if the number of values is different from one property to another? In our example below, animation-name has three values, while animation-delay has four, and animation-iteration-count has only two.


	animation-name: animation1,animation2,animation3;
	animation-duration: 1s,2s,5s;
	animation-delay: 10s,20s,10s,30s;
	animation-iteration-count: 5 3;

The property used as a reference for counting animations is animation-name. In our example below, animation-name has 3 values.
If the other properties have the same number of values, things are simple: we assign each of the values to the corresponding animation. In our example, this is the case for animation-duration which has three values.
If properties have additional parameters, those will be ignored. In our example, animation-delay has four values. The last value will not be applied to any of the animations: it will be ignored.
Finally, in the case where properties have fewer values, like animation-iteration-count in the example, the browser applies the values by looping over those that are available. Thus, animation1 will play five times, animation2 three times, and animation3 will play five times (we returned to the first value).
Special case: if one of the properties has only one value, that value will apply to all the animations.

The shot hand property does not allow this behavior because an undefined value is set to its initial value. This is not equivalent to an absent value. In the example below, animation1 is played indefinitely, while the two other animations are only played once (initial value = 1).


	animation: animation1 1s infinite, animation2 2s, animation3 5s;

Events related to animations.

Several events are associated with animations, the most commonly used being animationstart and animationend:

animationstart: start of the animation.
animationend: end of all repetitions of an animation.
animationiteration: end of ONE animation execution. This event is not triggered at the end of the last execution of an animation, it is animationend that is triggered in this case. Consequently, this event is triggered only if the property animation-iteration-count has a value greater than 1 or infinite.
animationcancel: sIt triggers when an animation has not been completed. Several causes can be considered: change of the property animation-name, the element is no longer displayed (display:none), etc.


	<div onanimationstart="this.innerHTML='Running animation '"
		 onanimationend="this.innerHTML='Ended aAnimation '"
		 onanimationiteration="this.innetHTML+='Repetition '"
	></div>

Examples with the `animation` property.

Here are some examples. These animations are made with pure CSS.

Animation of the `animation` property.

animation cannot itself be animated, like all other properties relating to animations.

Manipulating the `animation` property programmatically.

Change the value of `animation` in Javascript.

The directive @keyframes define an animation named rotation. The code below applies it to the element, specifying the duration and a few other parameters. We see that Javascript accepts a syntax with the property name written in kebab-case (a dash to separate the words), and another syntax with the camel-case convention (an uppercase letter to separate the words).


	let el = document.getElementById('id');
	el.style['animation'] = '5s linear infinite rotation';
	// or
	let el = document.getElementById('id');
	el.style.animation = '5s linear infinite rotation';

There is a small nuance to restart an animation that is already running, for example to reset it to its starting point. To restart an animation from its starting point, you must first cancel the current animation and then relaunch it. However, these two actions must be separated by a short period of time. This can be achieved using the setTimeout() function in Javascript.

Read in Javascript the value of `animation`.

The property animation must have been applied directly to the element itself via the style attribute in HTML, and not through a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['animation'];
	// or
	let el = document.getElementById('id');
	let value = el.style.animation;

Read the computed> value of `animation` in Javascript.

The calculated value is determined by the browser, after resolving the cascade of inheritances and priority rules (see Priorities). Units are standardized: for example, duration are expressed in seconds.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('animation');

Modify the value of the property `animation` with jQuery.

For JQuery enthusiasts, there is also a syntax to set the value of animation or read its calculated value.


 $('#id').css('animation', '5s linear infinite rotation');

Read the computed value of the property `animation` using JQuery.


	let value = $('#id').css('animation');

Do it yourself.

The two buttons below apply the entered value to an element, then display the assigned value for the first one, and the calculated value for the second. This allows us to see how the values are stored, especially the times that are converted to seconds regardless of the unit used to define them.

Browsers compatibility with `animation`.

As shown in the compatibility table below, CSS animations are correctly rendered by all current browsers.

Column 1

Ability to generally support CSS animations.

Animation
support

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `animation` property.

CSS Animations Level 1

Introduction of animations in CSS and definition of corresponding properties, including the animation shorthand property .

March 20, 2009
Working Draft.
CSS Animations Level 2

animation shorthand property is extended to include the new animation-timeline property.

March 02, 2023
Working Draft.

Animation - Property CSS

Summary of characteristics of the animation property