animation-name
Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-name задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом @keyframes (en-US), которое задаёт значения свойств для последовательности анимации.
Интерактивный пример
Часто удобно использовать сокращённое свойство 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в любой комбинации случаев.
Формальный синтаксис
animation-name =
[ (en-US) none | (en-US) <keyframes-name> ] (en-US)# (en-US)
<keyframes-name> =
<custom-ident> | (en-US)
<string> (en-US)
Примеры
См. CSS animations.
Спецификации
| Specification |
|---|
| CSS Animations Level 1 # animation-name |
Совместимость с браузерами
BCD tables only load in the browser