animation-name
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-name задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом @keyframes, которое задаёт значения свойств для последовательности анимации.
Интерактивный пример
animation-name: none; animation-name: slide; animation-name: bounce; <section class="flex-column" id="default-example"> <div class="animating" id="example-element"></div> </section> #example-element { animation-direction: alternate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in; background-color: #1766aa; border-radius: 50%; border: 5px solid #333; color: white; height: 150px; margin: auto; margin-left: 0; width: 150px; } @keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; } } @keyframes bounce { from { background-color: orange; color: black; margin-top: 0; } to { background-color: orange; color: black; margin-top: 40%; } } Часто удобно использовать сокращённое свойство 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 =
[ none | <keyframes-name> ]#
<keyframes-name> =
<custom-ident> |
<string>
Примеры
См. CSS animations.
Спецификации
| Specification |
|---|
| CSS Animations Level 1 # animation-name |