animation-name
Поддержка браузерами
| 12.0+ | 10.0+ | 16.0+ | 43.0+ | 30.0+ | 9.0+ |
Описание
CSS свойство animation-name указывает список имен анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает правило @keyframes, определяющее значения свойств для каждой ключевой точки анимации.
Примечание: часто бывает удобнее использовать свойство animation, позволяющее задавать сразу все свойства для анимации в одном объявлении.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам и псевдо-элементам ::before и ::after |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.animationName="mymove" |
Синтаксис
animation-name: имя_keyframe|none;
Значения свойства
| Значение | Описание |
|---|---|
| имя_keyframe | Указывает имя правила @keyframes. |
| none | Указывает, что анимация отсутствует. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
div.primer {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes mymove {
from { left:0px; }
to { left:540px; }
}
</style>
</head>
<body>
<div class="primer"></div>
</body>
</html>
Результат данного примера: