Как работает свойство animation-fill-mode в CSS?

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

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

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

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