CSS-свойство animation-name
Используйте свойство animation-name для указания имён анимаций, заданных правилами @keyframes. Пример animation-name.
Свойство animation-name задаёт одно или несколько имён @keyframes-анимаций, применяемых к элементу. Значением является идентификатор, который вы присвоили правилу @keyframes — именно имя связывает элемент с его анимацией. Без animation-name браузер не знает, какие ключевые кадры запускать, поэтому ничего не анимируется, даже если вы задали длительность.
Это свойство лишь указывает на анимацию и не запускает её самостоятельно. Для воспроизведения ключевых кадров по-прежнему требуется ненулевое значение animation-duration. animation-name относится к свойствам CSS3.
На практике animation-name редко задаётся отдельно — сокращённое свойство animation устанавливает имя, длительность, функцию времени, задержку, число итераций, направление и многое другое в одном объявлении. Используйте длинную форму, когда нужно переопределить только имя (например, заменить ключевые кадры при наведении, сохранив те же настройки времени).
Когда использовать
- Повторное использование одного набора ключевых кадров для нескольких элементов с разными длительностями или задержками: задайте
animation-nameодин раз и меняйте остальные свойства. - Смена анимации в зависимости от состояния — задайте элементу одно имя в обычном состоянии и другое при
:hoverили переключении класса. - Одновременный запуск нескольких анимаций на одном элементе, перечислив имена через запятую (см. раздел Несколько анимаций ниже).
Правила именования
Имя ключевых кадров является CSS-идентификатором, поэтому применяются те же правила:
- Имя чувствительно к регистру:
Slideиslide— разные имена. - Оно может содержать буквы, цифры, дефисы и знаки подчёркивания, но не может начинаться с цифры.
- Избегайте использования CSS-ключевых слов
none,initial,inheritиunsetв качестве имён анимаций —animation-name: noneинтерпретируется как «нет анимации», а не как блок ключевых кадров с именемnone.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.animationName = "element"; |
Синтаксис
Синтаксис CSS-свойства animation-name
animation-name: keyframename | none | initial | inherit;Вы можете указать несколько имён через запятую, чтобы применить несколько анимаций к одному элементу:
animation-name: slide, fade;Пример свойства animation-name
Пример CSS-свойства animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation-name: element;
animation-duration: 4s;
animation-iteration-count: 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>В приведённом примере имя анимации задано как «element». Вы можете выбрать любое имя, при условии что существует соответствующее правило @keyframes element. Если имя не соответствует ни одному правилу @keyframes, объявление просто игнорируется и ничего не анимируется.
Несколько анимаций
При перечислении нескольких имён каждое из них позиционно соответствует значениям остальных свойств анимации. Здесь slide получает 2s/ease-out, а fade — 4s/linear:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
padding: 20px;
background: #1c87c9;
color: #fff;
animation-name: slide, fade;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, linear;
animation-iteration-count: infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0.2; }
}
</style>
</head>
<body>
<div>Sliding and fading at the same time.</div>
</body>
</html>Если для другого свойства указано меньше значений, чем имён, значения повторяются, покрывая все имена. Для более тонкого управления остальными параметрами анимации см. animation-delay и animation-direction.
Значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Указывает, что анимации не будет. |
| keyframename | Задаёт имя анимации. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |