animation-fill-mode

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          .element {  animation-name: grow;  animation-duration: 3s;  animation-fill-mode: forwards;}
          .element {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"
  • none - значение по умолчанию, стили анимации не применяются до и после проигрывания анимации.
  • forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
  • backwards - после окончания анимации к элементу будут применены стили первого ключевого кадра.
  • both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

Для лучшего понимания работы этих значений посмотрите демо 👇

Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"