Понимание свойства 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