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 value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
none
- Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.
<custom-ident>
- Ім'я анімації. Цей ідентифікатора складається з комбінації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 benone
,unset
,initial
, orinherit
.
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> ]#where
<keyframes-name> = <custom-ident> | <string>
Examples
See CSS animations for examples.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-name' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 |
(Yes)-webkit (Yes) |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12 -o 12.10 |
4.0-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | (Yes)-webkit (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
.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API