CSS свойство animation-name
Свойство animation-name указывает одно или несколько имён анимаций, определённых правилом @keyframes, которые должны быть применены к выбранному элементу. Если для любого свойства анимации указано несколько значений через запятую, они будут привязаны к анимациям, определённым в animation-name, по-разному.
Свойство animation-name является одним из свойств CSS3.
Сокращённое свойство animation можно использовать для одновременной установки всех свойств анимации. Различные свойства анимации могут управлять её поведением. Они могут задавать время итерации анимации, должна ли анимация воспроизводиться или быть приостановлена, а также чередовать ли значения. Время начала анимации также можно задержать.
| Начальное значение | none |
|---|---|
| Применяется ко | Всем элементам. Также применяется к псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.animationName = "element"; |
Синтаксис
Синтаксис свойства CSS animation-name
animation-name: keyframename | none | initial | inherit;Пример свойства animation-name:
Пример использования свойства CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>INFO
В приведённом примере имя анимации установлено как "element". Вы можете выбрать любое имя по своему усмотрению.
Значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Указывает, что анимация не будет применяться. |
| keyframename | Указывает имя анимации. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает свойство CSS animation-name?