Как использовать свойство animation-fill-mode для сохранения конечного состояния анимации?

Свойство animation-fill-mode позволяет сохранять конечное состояние анимации. thecode.media www.geeksforgeeks.org Оно определяет, как элемент выглядит до начала анимации и после её завершения. thecode.media

У свойства есть четыре параметра: thecode.media

1. None (значение по умолчанию). thecode.media blog.hubspot.com Анимация влияет на элемент только во время своего выполнения. thecode.media До начала и после завершения анимации элемент возвращается к своим исходным стилям. thecode.media
2. Forwards. thecode.media www.geeksforgeeks.org После завершения анимации элемент остаётся в том состоянии, которое задано в последнем ключевом кадре. thecode.media
3. Backwards. thecode.media До начала анимации, включая время задержки, элемент принимает стили из первого ключевого кадра. thecode.media Это нужно, чтобы избежать резких изменений, пока анимация ещё не началась. thecode.media
4. Both. thecode.media Элемент сразу принимает стили первого ключевого кадра до начала анимации и сохраняет стили последнего кадра после её завершения. thecode.media Это объединяет поведение значений forwards и backwards. thecode.media

Пример использования. thecode.media Есть анимированный блок, который меняется в размерах и цветах — из синего становится зелёным. thecode.media Нужно, чтобы по завершении анимации он оставался в последнем трансформированном состоянии. thecode.media Для этого нужно прописать стили для блока и подключить к нему анимацию, указав значение animation-fill-mode: forwards. thecode.media

Если прописать вместо forwards значение backwards, то блок возвратится в состояние первого ключевого кадра, то есть станет маленьким и синим. thecode.media