Использование CSS анимации

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

Есть три приемущества CSS анимации перед традиционными способами:

1. Простота использования для простых анимации; Вы можете создать анимацию не зная JavaScript.
2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники чтобы сохранить производительность на таком высоком уровне .
3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

Чтобы создать CSS анимацию Вы должны добавить в стиль элемента, который хотите анимировать свойство animation или его под-свойства.  Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали о том, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, которая настраивается с помощью @keyframes рассматриваемой далее в Определение анимации посредством ключей.

Свойство animation имеет следующие под-свойства:

animation-delay

Настраивает задержку между временем загрузки элемента и временем начала анимации.

animation-direction

Дает возможность при каждом повторе анимации идти по алтернативному пути, либо сбросить все значения и повторить анимацию.

animation-duration

Настраивает время в течение которого должен пройти один цикл анимации.

animation-iteration-count

Настраивает количество повторении анимации; Вы можете использовать значание infinite для бесконечного повторения анимации.

animation-name

Определяет имя @keyframes настраивающего кадры анимации.

animation-play-state

Позволяет Вам приостановить и возобновить анимацию.

animation-timing-function

Настраивает ускорение анимации.

animation-fill-mode

Настраивает значения используемые анимацией до и после исполнения.

Определение анимации посредством ключей

После того, как вы настроили временные свойства( продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключей после @keyframes. Каждый ключ описывает где должен находиться анимированный элемент в данный момент.

В то время как временные  характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключи используют percentage чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

Вы также можете добавить ключи характеризующие промежуточное состояние анимации.

Примеры

Скольжение текста

 Этот простой пример анимирует скольжение текста в элементе <p> от правого края окна браузера.

Обратите внимание что анимация может сделать страницу шире чем окно браузера. Этого можно избежать поместив элемент который будет анимироваться в контейнер и установить ему свойство overflow:hidden.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

В стиле для элемента <p> с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для  @keyframes, описывающей саму анимацию это "slidein".

 В элемент <p> можно добавлять и другие пользовательские стили чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

 Ключи определяются с помощью правила @keyframes. В данном случае мы имеем только два ключа. Первый при 0% анимации (from). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок <p> находится за пределами правого края окна браузера .

Второй ключ (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит будто заголовок <p> приплывает к левому краю окна браузера.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Добавление других ключевых слов

Давайте добавим другие ключи в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка возрастал на время по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализоватьс помощью следующего ключа:

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Это говорит браузеру что при 75% выполнения анимации шрифт должен быть 300%, а ширина 150%.

Настройка повторения

 Чтобы настроить повторение нужно добавить свойство animation-iteration-count и придать ему такое значение, сколько вы хотите чтобы анимация повторялась . В данном случае давайте установим значение infinite для бесконечного повторения:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Анимация с текстом движущимся влево и назад

И так, мы настроили повторение, Но есть кое-что странное. Текст при каждом повторении снова "запрыгивает" за край окна браузера. То чего мы хотим, так это чтобы текст двигался влево и вправо. Этого лечко достичь посредством установки свойству animation-direction значения alternate:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Использование событий анимации

Вы можете получить дополнительный контроль на анимацией, а также полезную информацию о ней с помощью событий анимации. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.

Мы будем модифицировать текст чтобы выводить некоторую информацию  о каждом событии анимации. Так мы сможем увидеть как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 с., будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate . В ключах @keyframes установлены такие значения ширины и левого отступ, что элемент будет скользить по экрану.

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0%;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

Добавление обработчика событии анимации

Будем использовать JavaScript для отслеживания всех трех возможных события анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener(). Последнее что делает этот код это установка класса "slidein" для анимируемого элемента; мы делаем это чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше чем исполняется наш сценарий. Так мы сможем контролировать начало анимации сами посредством вставки класса "slidein" для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener(), показанной ниже.

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

Этот код также очень прост. Этот код следит за event.type чтобы определить тип события и добавляет элемент <ul> чтобы залоггировать произошедшее событие.

Вывод, когда анимация закончится будет выглядеть так-то так:

• Started: elapsed time is 0
• New loop started at time 3.01200008392334
• New loop started at time 6.00600004196167
• Ended: elapsed time is 9.234000205993652

Обратите внимание, что время указанное в выводе и время которое мы указали в стилях не совпадют. Также обратите внимание, что после оканчания итерации не посылается событие animationiteration ; вместо него посылается событие animationend.

HTML

Ради полноты картины приведем HTML. В разметке имеется тег ul в который и выводится вся информация:

<body>
  <h1 id="watchme">Watch me move</h1>
  <p>This example shows how to use CSS animations to make <code>p</code> elements
  move across the page.</p>
  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
  <ul id="output">
  </ul>
</body>

Смотрите также

• AnimationEvent
• Определение поддержки CSS анимации
• Использование CSS-переходов