Понимание свойства animation-fill-mode в CSS анимации
Большинство веб-разработчиков уже успели познакомиться с CSS анимацией. Некоторые даже создали несколько демок и сложных оригинальных решений. Для тех, кто хочет освоить эту тему с нуля, мы можем посоветовать ознакомиться с одним из руководств, множество которых вы можете найти на просторах сети. Сегодня мы поговорим об одном из непростых свойств анимации: animation-fill-mode.
Как показывает практика, animation-fill-mode это одно из самых неоднозначных свойств, которые используются в анимации. Например, никто не путается в таких свойствах, как animation-name, animation-duration. Но какие функции выполняет animation-fill-mode? Давайте рассмотрим несколько примеров:
.example {animation: myAnim 2s 500ms 2 normal ease-in forwards;}И, конечно, это может быть расширено до:
.example { animation-mame: myAnim; animation-duration: 2s; animation-delay: 500ms; animation-iteration-count: 2; animation-direction: normal; animation-timing-function: ease-in; animation-fill-mode: forwards;}В обоих случаях свойство animation-fill-mode объявлено последним и имеет значение forwards . Спецификация ничего не говорит о том, в каком порядке должно быть объявлено это свойство, но это принято считать хорошей практикой. Даже если вы никогда не работали с анимацией, вы легко можете понять, что делают другие свойства, с помощью документации, но с animation-fill-mode эта штука не пройдет.
Определение animation-fill-mode
Animation-fill-mode определяет, будет ли виден результат анимации после окончания времени ее выполнения. То есть с помощью этого свойства вы определяете, как будет выглядеть элемент после того, как анимация прекратится. После того, как мы определились с предназначением этого свойства, давайте подробнее разберемся с его использованием.
Animation-fill-mode может принимать одно из четырех значений: none, forwards, backwards, orboth.
None:
Это значение используется по умолчанию. Единственный случай, когда вам стоит явно указывать это значение, если вы использовали JS, чтобы изменить свойство или переопределили его ранее. Чтобы понять, как выглядит анимация, которая использует значение animation-fill-mode, установленное по умолчанию, взгляните на этот пример.
Как видно в демке, большой красный мяч слева трансформируется в маленький розовый мяч справа. Предпочтительней, чтобы объект оставался в своем конечном виде, что позволяет избежать уродливого скачка к начальной форме, но установки по умолчанию заставляют объект возвращаться в исходное состояние.
Forwards:
Давайте изменим значение на forwards: демка.
Используя это значение, мы сообщаем браузеру, что мы хотим, чтобы объект сохранял конечную форму.
Backwards:
Демо.
С первого взгляда кажется, что поведение объекта точно такое же, как и на первой демке. Но на самом деле существуют некоторые различия, так как в данном случае мы явно указываем необходимость возвращения начальных свойств объекту. Спецификация приводит следующее определение этого значения:
В течение времени, указанного, как задержка анимации, будет отображаться начальный ключевой кадр анимации.
Следующая демка прекрасно иллюстрирует особенности этого значения. В ней добавлено изменение цвета мяча до начала изменения размера, а также указана задержка. Теперь, нажимая на кнопку старта анимации, вы видите, как мяч становится синим.
Технически, каждая анимация использует задержку, но со значением 0с, поэтому использование backwards без дополнительного указания задержки бессмысленно. Также его использование не принесет результата, если начальное состояние объекта и свойства ключевого кадра имеют одинаковое значение. То есть, если в указанной выше демке заменить значение Backwards на None, мяч останется красным, пока не начнется анимация.
На самом деле, довольно сложно сходу придумать значительное количество сценариев, в которых имеет смысл использовать это значение.
Both:
Последнее возможное значение свойства. Это значение объединяет в себе свойства двух предыдущих. Вот демо. Как вы можете видеть, в период задержки к объекту применяются новые свойства, а в итоге объект сохраняет такие же настройки, как у финального кадра анимации.
Некоторые замечания и советы:
Вот несколько правил, которые стоит использовать помимо тех, которые указаны в спецификации:
- Хотя значение backwards имеет сомнительную практическую ценность, его стоит использовать при создании сложных анимаций, для которых используются скрипты или данные, указанные пользователем.
- Значения backwards и forwards меняются местами, если свойство animation-direction имеет значение reverse.
- Помните о том, что кроме специальных значений animation-fill-mode существует ряд общих значений, которые вы также можете использовать.
- Используя animation-fill-mode, не присваивайте анимации имена, которые совпадают с возможными значениями этого свойства. Иначе указанное имя будет восприниматься, как значение animation-fill-mode.
- Значения backwards и forwards меняются местами, если свойство animation-direction имеет значение reverse.
Вывод
Мы надеемся, что это краткое руководство помогло вам немного лучше понять animation-fill-mode. Конечно, полное понимание свойства приходит только при его постоянном практическом применении, поэтому не стоит зацикливаться на теории и немного поиграть с демками, чтобы разобраться в оставшихся вопросах.