CSS - animation-name

Example

Syntax  

animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

animation-name: <a href="css/initial">initial</a>
animation-name: <a href="css/inherit">inherit</a>
animation-name: <a href="css/unset">unset</a>

Values

<single-animation-name> is one of the following keywords:

none

Is a special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.

<custom-ident>

A string identifying the animation. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier. It can't be none, unset, initial, or inherit in any combination of cases.

Formal syntax

<a href="css/animation-name#single-animation-name"><single-animation-name></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><single-animation-name> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> IDENT</code></p>

Description  

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Browser Compatibility  

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See Also  

• Using CSS animations
• AnimationEvent

Specifications  

License