Анимация на сайте. Свойство animation
- 29 мая 2023
Свойство animation используется для создания анимации, например движения, изменения цвета, поворотов, изменения размера элементов. animation определяет набор ключевых кадров — keyframes, которые описывают, как изменяется свойство элемента со временем.
Синтаксис
animation:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state;
Наследование
Свойство не наследуется по умолчанию. Если вы устанавливаете animation для родительского элемента, а дочерний элемент не имеет своего собственного правила animation, то анимация не будет применяться к дочернему элементу.
Значения свойства
Значения animation могут быть комбинацией следующих параметров:
animation-name
Определяет название анимации, которое соответствует определенной группе ключевых кадров — @keyframes.
animation-duration
Задаёт продолжительность анимации в секундах или миллисекундах.
animation-timing-function
Определяет временную функцию, которая контролирует скорость и характер изменений во время анимации. Значения:
linear — анимация происходит с постоянной скоростью.
ease — значение по умолчанию, которое начинается медленно, затем ускоряется и замедляется в конце.
ease-in — начинается медленно и потом ускоряется.
ease-out — начинается быстро и замедляется к концу.
ease-in-out — начинается медленно, затем ускоряется, а потом замедляется.
animation-delay
Задаёт задержку перед началом анимации в секундах или миллисекундах.
animation-iteration-count
Определяет количество повторений анимации. Значения:
— infinite — анимация повторяется бесконечно.
— Числовые значения — указывают конкретное количество повторений.
animation-direction
Определяет направление анимации. Распространенные значения:
normal — проигрывается в прямом направлении.
reverse — проигрывается в обратном направлении.
alternate — проигрывается в прямом и обратном направлениях чередуясь.
animation-fill-mode
Определяет стили, применяемые к элементу до и после анимации. Распространенные значения:
none — стили элемента не изменяются до или после анимации.
forwards — элемент сохраняет стили последнего кадра после окончания анимации.
backwards — элемент применяет стили первого кадра до начала анимации.
animation-play-state
Определяет состояние анимации: остановлена или воспроизводится. Значения:
running— анимация воспроизводится.paused— анимация остановлена.
Пример использования
Создадим анимацию с именем myAnimation, которая изменяет прозрачность элемента от полностью прозрачного — opacity: 0, до полностью видимого — opacity: 1, а затем снова до полностью прозрачного. Анимация будет повторяться бесконечно — infinite и длиться 3 секунды — 3s.
<head>
<style>
@keyframes myAnimation {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.element {
animation: myAnimation 3s infinite;
}
</style>
</head>
<body>
<div class="element">Пример элемента с анимацией</div>
</body>
@keyframes myAnimation {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.element {
animation: myAnimation 3s infinite;
}
⭐ Поддержка браузерами свойства animation
Нюансы использования
- Быстрые анимации: если анимация слишком быстрая, пользователи могут не успеть заметить и оценить изменения, особенно если они происходят на важных элементах интерфейса.
- Много анимаций на странице: слишком много анимаций на одной странице может привести к перегрузке и замедлению производительности.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.