Дмитрий Нечаев
CSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимации
Свойство animation-fill-mode
в CSS позволяет контролировать состояние анимируемого элемента до и после выполнения анимации. Это полезно для сохранения стиля элемента после завершения анимации или для задания начального состояния до ее начала. В этой статье мы подробно рассмотрим, как использовать animation-fill-mode
, и приведем примеры для лучшего понимания.
Основы animation-fill-mode
Свойство animation-fill-mode
определяет, каким образом будут применяться стили, определенные в ключевых кадрах анимации, к элементу до начала и после завершения анимации.
Варианты значения animation-fill-mode
none
- Анимация не изменяет стили элемента до начала и после окончания (по умолчанию).
forwards
- После окончания анимации элемент сохраняет стили последнего ключевого кадра.
backwards
- Перед началом анимации элемент принимает стили начального ключевого кадра.
both
- Элемент сохраняет стили начального ключевого кадра до начала анимации и стили последнего ключевого кадра после окончания.
Синтаксис animation-fill-mode
Синтаксис использования свойства animation-fill-mode
простой:
.element {
animation-fill-mode: none | forwards | backwards | both;
}
Пример использования
Рассмотрим простой пример, где анимация изменяет прозрачность элемента:
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-element {
animation-name: fade;
animation-duration: 2s;
animation-fill-mode: forwards; /* Элемент сохраняет прозрачность после окончания анимации */
}
В этом примере элемент .fade-element
будет плавно изменять прозрачность от 0 до 1 в течение 2 секунд и останется видимым после завершения анимации.
Подробное рассмотрение каждого значения
none
Значение none
означает, что анимация не влияет на стили элемента до и после ее выполнения. Элемент возвращается к своим исходным стилям.
.none-animation {
animation-name: fade;
animation-duration: 2s;
animation-fill-mode: none; /* Элемент возвращается к исходной прозрачности */
}
forwards
Значение forwards
сохраняет стили последнего ключевого кадра после окончания анимации.
.forwards-animation {
animation-name: fade;
animation-duration: 2s;
animation-fill-mode: forwards; /* Элемент сохраняет конечную прозрачность */
}
backwards
Значение backwards
применяет стили начального ключевого кадра до начала анимации.
.backwards-animation {
animation-name: fade;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: backwards; /* Элемент принимает начальную прозрачность до начала анимации */
}
both
Значение both
объединяет эффекты forwards
и backwards
, применяя стили начального ключевого кадра до начала анимации и стили последнего ключевого кадра после ее окончания.
.both-animation {
animation-name: fade;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: both; /* Элемент принимает начальную прозрачность до начала и конечную после окончания анимации */
}
Практические примеры использования animation-fill-mode
Пример с движущейся анимацией
Рассмотрим пример, где анимация перемещает элемент по экрану:
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.move-element {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards; /* Элемент остается на месте после окончания анимации */
}
Пример с вращающейся анимацией
Создадим анимацию, которая будет вращать элемент и сохранять его конечное состояние:
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-element {
animation-name: rotate;
animation-duration: 4s;
animation-fill-mode: forwards; /* Элемент сохраняет конечное вращение после окончания анимации */
}
Советы и рекомендации
Использование в комбинации с другими свойствами. Свойство
animation-fill-mode
часто используется вместе сanimation-delay
иanimation-iteration-count
для создания более комплексных анимаций.Тестирование в разных браузерах. Убедитесь, что ваши анимации корректно работают в различных браузерах, так как поддержка CSS-анимаций может отличаться.
Подбор подходящего значения. Выбирайте значение
animation-fill-mode
в зависимости от эффекта, которого хотите достичь: сохранение начальных или конечных стилей, или их комбинацию.
Заключение
Свойство animation-fill-mode
в CSS является важным инструментом для управления состоянием анимируемого элемента до начала и после окончания анимации. Используя это свойство, вы можете контролировать, каким образом применяются стили, определенные в ключевых кадрах анимации, и создавать более динамичные и привлекательные веб-страницы. Следуя приведенным рекомендациям и примерам, вы сможете эффективно использовать animation-fill-mode
в своих проектах, улучшая взаимодействие с пользователями и делая ваши веб-страницы более интересными и интерактивными.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile