Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-name
задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом @keyframes
, которое задаёт значения свойств для последовательности анимации.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Часто удобно использовать сокращенное свойство animation
для одновременной установки всех свойств анимации.
Синтаксис
/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */
animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset
Значения
none
- Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
<custom-ident>
- Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от
a
доz
, цифр от0
до9
, подчеркивания (_
), и/или черты (-
). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может бытьnone
,unset
,initial
, илиinherit
в любой комбинации случаев.
Формальный синтаксис
[ none | <keyframes-name> ]#где
<keyframes-name> = <custom-ident> | <string>
Примеры
См. CSS animations.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Animations Определение 'animation-name' в этой спецификации. |
Рабочий черновик | Начальное определение |
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Да)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 |
4.0-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |