CSS анимации

CSS анимации

CSS может создавать анимационные эффекты элементов HTML, не используя JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Поддержка браузеров анимации

Числа в таблице указывают на версию первого браузера, который поддерживает этот атрибут.

Свойства Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Что такое CSS-анимация?

Анимация позволяет элементам постепенно переходить от одного стиля к другому.

Вы можете свободно изменить любое количество CSS-атрибутов.

Чтобы использовать CSS-анимацию, вам необходимо сначала определить несколько ключевых кадров.

Ключевые кадры содержат стиль элемента в определенный момент времени.

@keyframes правила

Если вы в @keyframes Правила определяют CSS-стили, и анимация будет постепенно изменять текущий стиль на новый в указанное время.

Чтобы анимация работала, ее необходимо привязать к элементу.

Примеры, приведенные здесь, будут привязывать анимацию "example" к элементу <div>. Анимация将持续 4 секунды, при этом цвет фона элемента <div> будет постепенно изменяться от "red" к "yellow":

Пример

/* Код анимации */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Применить эффект анимации к этому элементу */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Попробуйте сами

Внимание:animation-duration Атрибут определяет, сколько времени потребуется для завершения анимации. Если атрибут не указан animation-duration Если не указан атрибут, анимация не произойдет, так как значение по умолчанию составляет 0s (0 секунд).

В примере выше, используя ключевые слова "from" и "to" (представляющие 0% (начало) и 100% (завершение)), мы установили, когда должен изменяться стиль.

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

Примеры, приведенные здесь, изменят цвет фона элемента <div> при завершении анимации на 25%, 50% и 100%.

Пример

/* Код анимации */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Применение анимации к элементам */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Попробуйте сами

Ниже приведен пример, где цвет фона и положение элемента <div> будут изменены при завершении 25%, 50% и 100% анимации:

Пример

/* Код анимации */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Применение анимации к элементам */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Попробуйте сами

Задержка анимации

animation-delay Свойство определяет задержку начала анимации.

Ниже приведен пример, где перед началом анимации есть задержка в 2 секунды:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Попробуйте сами

Отрицательные значения также разрешены. Если использовать отрицательные значения, то анимация начнется, словно она уже играла N секунд.

В следующем примере анимация начнется, словно она уже играла 2 секунды:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Попробуйте сами

Установка количества раз, которые должна выполнить анимация

animation-iteration-count Свойство определяет, сколько раз должна выполняться анимация.

Ниже приведен пример, где анимация будет выполняться 3 раза перед остановкой:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Попробуйте сами

Ниже приведен пример использования значения "infinite", чтобы анимация продолжалась всегда:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Попробуйте сами

Возвратное или轮流ое движение анимации

animation-direction Свойство определяет, будет ли анимация играть вперед, назад или по轮流у.

animation-direction Атрибут принимает следующие значения:

  • normal - Анимация играет normalmente (вперед). Значение по умолчанию
  • reverse - Анимация играет в обратном направлении (назад)
  • alternate - Анимация сначала играет вперед, затем назад
  • alternate-reverse - Анимация сначала играет назад, затем вперед

В следующем примере анимация будет двигаться в противоположном направлении (назад):

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Попробуйте сами

Ниже приведен пример использования значения "alternate", чтобы анимация сначала двигалась вперед, а затем назад:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Попробуйте сами

Ниже приведен пример использования значения "alternate-reverse", чтобы анимация сначала двигалась назад, а затем вперед:

Пример

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Попробуйте сами

Указание кривой скорости анимации

animation-timing-function Определяет кривую скорости анимации.

animation-timing-function Атрибут принимает следующие значения:

  • ease - Укажите анимацию, которая начинается медленнее, затем ускоряется, а затем медленно заканчивается (по умолчанию)
  • linear - Определите анимацию, в которой скорость от начала до конца одинакова
  • ease-in - Определите анимацию, которая начинается медленнее
  • ease-out - Определите анимацию, которая заканчивается медленнее
  • ease-in-out - Укажите анимацию, которая начинается и заканчивается медленнее
  • cubic-bezier(n,n,n,n) - Определите свои значения в三次 бэ塞尔-функции

Ниже приведены примеры различных кривых скорости, которые можно использовать:

Пример

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Попробуйте сами

Указание模式的 заполнения анимации

CSS анимации не влияют на элемент до начала первого ключевого кадра или после завершения последнего ключевого кадра.animation-fill-mode атрибут можетoverride это поведение.

Когда анимация не играет (до начала, после завершения или после завершения обоих),animation-fill-mode Определяет стиль целевого элемента.

Атрибут animation-fill-mode принимает следующие значения:

  • none - По умолчанию. Анимация не применяет никакой стиль к элементу до выполнения или после выполнения.
  • forwards - Элемент сохранит значения стиля, установленные в последнем ключевом кадре (в зависимости от animation-direction и animation-iteration-count).
  • backwards - Элемент получит значения стиля, установленные в первом ключевом кадре (в зависимости от animation-direction), и сохранит это значение в течение периода задержки анимации.
  • both - Анимация будет следовать и вперед, и назад, расширяя свойства анимации в обоих направлениях.

Примеры показывают, как элемент <div> сохраняет значения стиля из последнего ключевого кадра в конце анимации:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Попробуйте сами

В следующем примере <div> элемент получает значение стиля из первого ключевого кадра до начала анимации (во время задержки анимации):

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Попробуйте сами

В следующем примере <div> элемент получает значение стиля из первого ключевого кадра до начала анимации и сохраняет значение стиля из последнего ключевого кадра после завершения анимации:

Пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Попробуйте сами

Сокращенные свойства анимации

В следующем примере используются шесть свойств анимации:

Пример

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Попробуйте сами

Использование сокращенной формы animation Свойства также могут реализовать анимацию, аналогичную предыдущему примеру:

Пример

div {
  animation: example 5s linear 2s infinite alternate;
}

Попробуйте сами

Свойства CSS анимации

В таблице приведены правила @keyframes и все свойства CSS анимации:

Свойства Описание
@keyframes Определяет режим анимации.
animation Устанавливает сокращенную форму всех свойств анимации.
animation-delay Определяет задержку начала анимации.
animation-direction Определяет, играет ли анимация вперед, назад или альтернативно.
animation-duration Определяет время, которое должно пройти, чтобы анимация завершилась один цикл.
animation-fill-mode Определяет стиль элемента при его остановке анимации (до начала, после завершения или и то, и другое).
animation-iteration-count Определяет количество раз, сколько раз должна играть анимация.
animation-name Определяет имя анимации @keyframes.
animation-play-state Определяет, запускать или приостанавливать анимацию.
animation-timing-function Определяет кривую скорости анимации.