Статьи

Понимание свойства CSS animation-fill-mode

Я уверен, что почти все из нас, кто работает над интерфейсной разработкой, когда-то играли с анимацией на основе ключевых кадров CSS . Некоторые из нас, возможно, даже создали довольно сложные демонстрации и эксперименты с этой функцией.

Если вы хотите получить исчерпывающее введение в эту тему, моя статья в журнале Smashing Magazine 2011 года по- прежнему является хорошим вариантом. Однако в этой статье я хотел сосредоточиться на одной части спецификации CSS Animations: свойстве animation-fill-mode

Это единственное свойство на основе анимации, которое не очень понятно. Например, никого не смущает animation-nameanimation-duration Давайте кратко рассмотрим это с некоторыми примерами.

Синтаксис для определения режима заполнения

Как вы, возможно, уже знаете, базовая анимация ключевых кадров определяется с помощью @keyframes Но ключевые кадры ничего не сделают, если вы не свяжете их с именем анимации. Вот краткая декларация свойства animation

 .example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}

И, конечно же, эту же сокращенную строку можно расширить до:

 .example {
  animation-name: 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 Мы не должны определять это в последнюю очередь, но это может быть хорошей практикой для понимания.

Опять же, даже если вы никогда не использовали CSS-анимацию, вы, вероятно, сможете выяснить, что делает все, что в этом объявлении выше – кроме animation-fill-mode

Определение спецификации режима заполнения

Так что же спецификация говорит об этой собственности?

Свойство animation-fill-mode

Далее поясняется, что время «вне» исполнения, в частности, относится ко времени между моментом, когда анимация применяется к элементу, и временем, когда элемент фактически начинает анимацию. По сути, с помощью значения режима заполнения вы определяете внешний вид анимированного элемента вне времени, в течение которого выполняется анимация, но после того, как анимация была применена. Может показаться странным, но вы сразу поймете, что я имею в виду.

Давайте построим это базовое определение (которое может все еще немного сбивать с толку), рассмотрев каждое из возможных значений.

Разбивая ценности

Свойство animation-fill-modenoneforwardsbackwardsboth Вот разбивка каждого.

Значение: нет

Это начальное значение или значение по умолчанию для animation-fill-mode Единственный раз, когда вы определяете значение none

Чтобы понять, что делает значение noneanimation-fill-modenone

Вы можете видеть, что в большинстве случаев режим заполнения «none» – это не то, что вам нужно. Помните, что режим заполнения определяет, как будет выглядеть элемент вне времени выполнения анимации.

В этом примере шар сначала становится красным, затем становится розовым, одновременно перемещаясь вправо и изменяя размер. Было бы предпочтительнее, если бы, когда анимация закончилась, шар оставался маленьким, розовым и направо. Это позволит избежать отвратительного прыжка назад к началу, когда анимация закончится.

Значение: форварды

Давайте изменим анимацию нашего шара, чтобы иметь значение режима заполнения «вперед»:

Теперь вы можете увидеть преимущества использования animation-fill-modeforwards Когда мы определяем его с помощью этого значения, мы сообщаем браузеру, что мы хотим, чтобы наш анимированный элемент сохранял свой окончательный набор стилей, как определено в последнем ключевом кадре. Таким образом, мы не получим этот последний переход обратно к начальному состоянию элемента до того, как он начал анимироваться (кнопка «сброс», которую я добавил в демо, делает это для нас).

Значение: назад

Давайте изменим значение на backwards

Обратите внимание, что поведение в этой демонстрации точно такое же, как и в первой демонстрации, для которой значение animation-fill-mode Это почему?

В отличие от forwardsbackwards Это имеет больше смысла, когда мы видим, что спецификация говорит о значении в backwards

В течение периода, определенного с помощью animation-delay Это либо значения ключевого кадра fromto

Чтобы продемонстрировать это, я сделал две модификации демо:

  • Добавлен ключевой кадр «из» другого цвета для шара.
  • Добавлена ​​задержка с использованием свойства animation-delay

Вот:

Теперь вы можете видеть, что как только вы нажимаете кнопку «Запустить анимацию», шар становится синим. Это потому, что есть заметная задержка. Технически, каждая анимация имеет задержку по умолчанию, но задержка равна 0sbackwards При одинаковых стилях и одинаковой задержке удаление значения backwards

Честно говоря, я не вижу большого практического использования значения в backwards Трудно представить слишком много сценариев, в которых анимация имеет разные стили в первом ключевом кадре, чем в статическом состоянии перед анимацией элемента. Но я готов выслушать некоторые варианты использования, если у вас есть идеи.

Значение: оба

Окончательное значение, которое мы рассмотрим, является значением both Это значение указывает браузеру применять эффекты как forwardsbackwards

Давайте сохраним те же стили в нашем демо и посмотрим, что произойдет, когда мы дадим ему значение both

Не ракетостроение. Как вы можете видеть, в течение начального периода задержки применяются начальные стили ключевого кадра, а затем анимация заканчивается и останавливается со стилями из окончательного ключевого кадра (что, как уже упоминалось, часто того, что вам нужно). И снова, это значение не будет сильно отличаться от простого использования forwards

Некоторые заметки и советы

Исходя из вышеизложенного, а также некоторых деталей в спецификации, вот некоторые вещи, на которые следует обратить внимание:

  • Хотя я несколько минимизировал важность значений backwardsboth Вариантов использования будет предостаточно (подумайте: игры), но только с экспериментами и инновациями.
  • Эффект значений forwardsbackwardsanimation-directionreverse Если вы возитесь с демо, вы увидите, как это работает.
  • Хотя я сказал, что animation-fill-modeсвойства CSS-свойства, которые также можно использовать.
  • В более ранних версиях спецификации, animation-fill-modeanimation
  • При использовании сокращенного обозначения анимации и выборе собственного имени для вашей анимации не используйте имя, которое соответствует допустимым значениям режима заполнения (например, «обратный» или «переадресация»), в противном случае браузер проанализирует сокращенное объявление, предполагая, что имя действительно значение режима заполнения.

Вывод

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