Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.
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
AnimationEventAPI
