Animation-name - це властивість CSS, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на @keyframes правило, яке визначає значення властивостей для анімаційного ряду.
/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset

Часто, буде зручно користуватися коротким варіантом  animation для встановлення усіх властивостей анімації за один раз.

Initial valuenone
Applies toall elements, ::before and ::after pseudo-elements
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar



Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.
Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер a-z (без врахування регістру літер), цифр 0-9, підкреслення (_), і/або дефісу (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal syntax

[ none | <keyframes-name> ]#

<keyframes-name> = <custom-ident> | <string>


See CSS animations for examples.


Specification Status Comment
CSS Animations
The definition of 'animation-name' in that specification.
Working Draft Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit
5.0 (5.0)-moz
16.0 (16.0)[1]
10  12 -o
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes)-webkit
? ? ? ? ?

[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