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 атрибут может преодолеть это поведение.

При отсутствии воспроизведения анимации (до начала, после окончания или после окончания обоих),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 Определяет кривую скорости анимации.