animation-name

Animation-name - це властивість CSS, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на @keyframes (en-US) правило, яке визначає значення властивостей для анімаційного ряду.

/* 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 (en-US) для встановлення усіх властивостей анімації за один раз.

Initial value (en-US)	`none`
Applies to	all elements, `::before` and ::after (en-US) pseudo-elements
Inherited (en-US)	no
Computed value (en-US)	as specified
Animation type	discrete

Syntax

Values

none: Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.
<custom-ident> (en-US): Ім'я анімації. Цей ідентифікатора складається з комбінації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

[ (en-US) none | (en-US) <keyframes-name> ] (en-US)# (en-US)where 
<keyframes-name> = <custom-ident> (en-US) | (en-US) <string> (en-US)

Examples

See CSS animations for examples.

Specifications

Specification	Status	Comment
CSS Animations Level 1 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! (en-US)

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit (en-US) 43.0	(Yes)-webkit (en-US) (Yes)	5.0 (5.0)-moz (en-US) 16.0 (16.0)^[1]	10	12 -o (en-US) 12.10	4.0-webkit (en-US)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Yes)-webkit (en-US) (Yes)	?	?	?	?	?

[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.