логотип PurpleSchool
логотип PurpleSchool

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; /* Элемент сохраняет конечное вращение после окончания анимации */
}

Советы и рекомендации

  1. Использование в комбинации с другими свойствами. Свойство animation-fill-mode часто используется вместе с animation-delay и animation-iteration-count для создания более комплексных анимаций.

  2. Тестирование в разных браузерах. Убедитесь, что ваши анимации корректно работают в различных браузерах, так как поддержка CSS-анимаций может отличаться.

  3. Подбор подходящего значения. Выбирайте значение animation-fill-mode в зависимости от эффекта, которого хотите достичь: сохранение начальных или конечных стилей, или их комбинацию.

Заключение

Свойство animation-fill-mode в CSS является важным инструментом для управления состоянием анимируемого элемента до начала и после окончания анимации. Используя это свойство, вы можете контролировать, каким образом применяются стили, определенные в ключевых кадрах анимации, и создавать более динамичные и привлекательные веб-страницы. Следуя приведенным рекомендациям и примерам, вы сможете эффективно использовать animation-fill-mode в своих проектах, улучшая взаимодействие с пользователями и делая ваши веб-страницы более интересными и интерактивными.

Стрелочка влевоCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний