Animation-name - Property CSS

Syntax diagram of animation-name.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• name is the name of an animation defined by a @keyframes at-rule.
• If multiple animations are declared, as many values can be specified by separating them with commas.

Description of the animation-name property.

animation-name defines which animation is to be applied to the element. The animation must have been defined by a @keyframes directive.

Several animations can be listed by separating them with commas. For more information on multiple animations, refer to the page on multiple animations.

For a general overview of animations, refer to the page animations in CSS.

Values for animation-name.

• animation-name: none;

  Default value. No animation is associated with the element.
  This value can be used to disable an animation defined elsewhere in the style cascade.

• animation-name: animation1;

  The animation named 'animation1' is associated with the element. It will play if a duration is also set.
  This name must match an existing @keyframes declaration. For example:

  @keyframes animation1 { from {...} to {...} }
• animation-name: animation1, animation2, ...;

  Several animations are associated with the element. They will be played simultaneously.
  For a detailed explanation on multiple animations, see the page multiple animations.

• animation-name: initial; (none) animation-name: inherit; animation-name: revert; animation-name: revertLayer; animation-name: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the animation-name property.

The property animation-name itself cannot be animated. This is the case for all other properties that define an animation parameter.

Manipulating the animation-name property programmatically.

Change the value of animation-name in Javascript.

In JavaScript, here is how to modify the value of animation-name, which of course will change the animation. Two syntaxes are possible in JavaScript: the first with the property name written in kebab-case (a dash to separate words), and the second with the camel-case writing (a capital letter to separate words).

let el = document.getElementById('id'); el.style['animation-name'] = 'translation1'; // or let el = document.getElementById('id'); el.style.animationName = 'translation1';

rRead in Javascript the value of animation-name.

The property animation-name must have been set directly on the element itself, using the HTML style attribute.

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

read the computed value of animation-name in Javascript.

The computed value is the one resulting from the evaluation of the inheritance cascade. Failing that, it will be the initial value of the property (none in the case of animation-name), but the calculated value is always equal to something.

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

Change the computed value of the property animation-name in JQuery.

The following code, in JQuery, sets the property animation-name to translation1.


$('#id').css('animation-name', 'translation1');
// or
$('#id').css('animationName', 'translation1');


Read the computed value of animation-name with JQuery.

The reading of the computed value of a property can be done with the following code.

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

Other code examples.

Find more examples of Javascript and JQuery code on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the property animation-name and then display either the value as it was applied or the calculated value. In the case of animation-name, this will make no difference.

Simulator.

Several animations have been defined by successive @keyframes directives. This simulator allows you to apply one or the other to the element below.
Note: to ensure that the animation is triggered, you may need to reset it to the value none before selecting a new value.

Browsers compatibility with animation-name.

The animation-name property is properly supported by current browsers.

1

Animation
support

2

animation-name
property

Estimated overall support.

97%

96%

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

Caniuse

Historic of the animation-name property.

• CSS Animations Level 1

  Introduction of animations in CSS. Initial definition of the animation-name property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  No change to animation-name.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, about animations.

The CSS standard defined by the W3C is organized into modules. The CSS Animations module describes everything related to animations.

Properties:

animation

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

animation-composition

Defines how multiple animations applied to the same property interact.

animation-delay

Waiting time before the animation starts, usually counted from the page load.

animation-direction

Defines the direction of the animation (normal or reverse) with respect to the @keyframes at-rule.

animation-duration

Sets the total duration of an animation cycle.

animation-fill-mode

Sets the override when the animation is not running.

animation-iteration-count

Sets the number of times an animation should be played.

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-timing-function

Defines the easing function to be used during an animation.

At-rules:

@keyframes

Defines the name of an animation and which properties are animated.