Клавиша / esc

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 — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

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

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

Подсказки

Скопировано