animation-fill-mode

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

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