animation
Запускает на элементе анимацию из `@keyframes`.
Синтаксис
animation: name duration easing delay count direction;Значения
| Параметр | Тип | Описание |
|---|---|---|
| name | ident | Имя правила `@keyframes`. |
| duration | time | Длительность одного цикла: `2s`. |
| infinite | count | number | Сколько раз повторить: `3`, `infinite`. |
| alternate | keyword | Каждый второй цикл идёт в обратную сторону. |
| forwards | keyword | Сохраняет конечное состояние после окончания. |
Примеры
Бесконечная пульсация:
<style>
@keyframes pulse {
from { scale: 1; }
to { scale: 1.2; }
}
.dot { width: 30px; height: 30px; border-radius: 50%; background: crimson; margin: 10px;
animation: pulse 0.8s ease-in-out infinite alternate; }
</style>
<div class="dot"></div>Однократное появление:
<style>
@keyframes slide-in {
from { opacity: 0; translate: -40px 0; }
}
.msg { padding: 8px; background: palegreen; animation: slide-in 0.6s ease-out; }
</style>
<p class="msg">This message slides in when the page loads.</p>Примечания
В отличие от transition, анимация запускается сама и может повторяться. Уважайте настройки пользователя: оборачивайте заметное движение в @media (prefers-reduced-motion: no-preference).
См. также
- @keyframes — Описывает шаги анимации, которую затем запускают свойством `animation`.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
- transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
- animation-timeline — Связывает CSS-анимацию с прокруткой вместо времени: анимация продвигается по мере прокрутки страницы или элемента.
Вопросы и ответы по теме
В учебнике
- Анимации — Анимации CSS — правило @keyframes, свойство animation, повторы и направление, ключевые кадры в процентах, fill-mode и prefers-reduced-motion.