Чем отличается animation-fill-mode от обычного цикла анимации?

Animation-fill-mode отличается от обычного цикла анимации тем, что он определяет, как элемент выглядит до начала анимации и после её завершения. thecode.media

Обычно анимация влияет на элемент только во время своего выполнения: до старта он выглядит как обычно, а после окончания возвращается в исходное состояние. thecode.media

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

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

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