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

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.

W3C Module

CSS Animations

References (W3C)

🡇

🡅

CSS Animations Level 2

Document status: WD (Working Draft)

CSS Animations Level 1

Document status: WD (Working Draft)

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-name : name of the animation.
animation-duration : duration of the animation.
animation-timing-function : dynamics of animation (linear, acceleration, deceleration, etc.)
animation-delay : waiting time before the start of the animation.
animation-iteration-count : number of repetitions of the animation.
animation-direction : directions of the animation (normal or reverse).
animation-fill-mode: replacement style to apply when the animation is not running.
animation-play-state : state of the animation (running or paused).
animation-timeline : synchronization of the animation with something other than time.

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.

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: rotation 3s 5;


	animation-name: 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;

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:

Not animatable: the property cannot be animated. Generally, this is due to the complexity or nonsensical results it would create. For example, properties that define animations cannot be animated themselves.
Discrete: the property automatically changes value, but it does so abruptly, without transition. Properties that only accept predefined non-numeric values (like font-family, for example) will switch abruptly from one value to another.
By computed value: the transition between different values occurs gradually. Generally speaking, properties that accept numerical values or colors can be animated this way.
Repeatable list:
Integer: this is a variant of the discrete type. It involves properties that only accept integer values. Although numeric, these values cannot evolve continuously: they jump from one integer to another. This is the case for properties like z-index, grid-row, code>grid-column for example.

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'] = 'boussole 5s linear infinite';
	// or
	let el = document.getElementById('id');
	el.style.animation = 'boussole 5s linear infinite';

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', 'boussole 5s linear infinite');

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.