W3docs
ru
Войти

Свойство animation в CSS

Learn about CSS animation property which is used to animate (gradually change from one style to another) CSS properties with discrete values. See examples.

Свойство animation используется для анимации (постепенного изменения одного стиля на другой) CSS-свойств с непрерывными значениями: свойств макета (border, height, width и т. д.), свойств, определяющих положение (left, top), размеров шрифта, цветов и прозрачности.

Свойство animation является одним из CSS3 properties.

В устаревших браузерах для поддержки старых версий может потребоваться префикс -webkit-.

info

Свойства, которые используют ключевое слово в качестве значения, например display: none; или visibility: hidden;, не могут быть анимированы. Свойства со значениями вроде height: auto; также не могут быть анимированы.

Правило @keyframes

Чтобы использовать анимацию, сначала нужно указать, что должно происходить в определённые моменты анимации. Это задаётся с помощью правила @keyframes.

Правило @keyframes состоит из ключевого слова “@keyframes”, за которым следует animation-name, идентифицирующее анимацию. Затем анимация применяется к элементу с помощью этого идентификатора в качестве значения свойства animation-name.

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

Пример анимации с правилом @keyframe:

Пример свойства animation с @keyframes

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 4s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property.</div>
  </body>
</html>
Попробуйте сами »

В этом примере мы привязываем анимацию к элементу <div>. Анимация будет длиться 4 секунды и постепенно изменит цвет фона элемента <div> с "green" на "grey".

Свойства, связанные с анимацией

Animation — это сокращённое свойство, которое используется для задания всех свойств анимации в одном объявлении. Ниже мы перечисляем все стандартные свойства, связанные с анимацией.

Теперь посмотрим на свойства, связанные с анимацией, в действии.

Пример анимации с некоторыми свойствами, связанными с анимацией:

Пример анимации с некоторыми свойствами, связанными с анимацией:

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

/*
  The same can be declared using the animation shorthand property 
*/

.element {
  animation: pulse 3.5s ease-in 1s alternate infinite none running;
}

Animation-name

Это свойство определяет имя правила @keyframes, которое вы хотите применить.

Синтаксис свойства animation-name

animation-name: keyframe-name | none | initial | inherit

Пример свойства animation-name:

Пример свойства animation-name

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation: element 4s infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-name</h2>
    <div>Имя анимации задано как "element".</div>
  </body>
</html>
Попробуйте сами »

Animation-duration

Оно определяет продолжительность времени (в секундах или миллисекундах), за которое анимация завершает один цикл. Если это свойство не указано, анимация не будет выполняться.

Синтаксис свойства animation-duration

animation-duration: time | initial | inherit

Пример свойства animation-duration:

Пример свойства animation-duration

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>
Попробуйте сами »

Animation-timing-function

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

Синтаксис свойства animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Пример свойства animation-timing-function со значением “ease”:

Пример свойства animation-timing-function со значением “ease”:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-timing-function</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-delay

Это свойство задаёт время (в секундах или миллисекундах) между загрузкой элемента и началом анимации.

Синтаксис свойства animation-delay

animation-delay: time | initial | inherit

Пример свойства animation-delay:

Пример свойства CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-delay</h2>
    <p>Здесь анимация начинается через 3 секунды.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-direction

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

Синтаксис свойства animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Можно использовать следующие значения:

  • normal — (по умолчанию) анимация воспроизводится вперёд (ключевые кадры 0% - 100%)
  • reverse — анимация воспроизводится назад (ключевые кадры 100% - 0%)
  • alternate — анимация воспроизводится вперёд, затем в обратном направлении и повторяется.
  • alternate-reverse — анимация воспроизводится назад, затем вперёд.

Пример свойства animation-direction:

Пример свойства animation-direction:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-direction</h2>
    <p>Здесь анимация воспроизводится вперёд.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-iteration-count

Задаёт количество раз, которое цикл анимации должен быть воспроизведён перед остановкой. Значение по умолчанию — один, но можно задать любое положительное целое число. Если задать ключевое слово infinite, анимация будет воспроизводиться бесконечно.

warning

Нулевое или отрицательное целое число никогда не запустит анимацию.

Синтаксис свойства animation-iteration-count

animation-iteration-count: number | infinite | initial | inherit

Пример свойства animation-iteration-count:

Пример свойства CSS <span class="property">animation-iteration-count</span>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      div {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 30px 0;
        border-radius: 50%;
        animation-name: pulse;
      }
      .element-one {
        background-color: #1c87c9;
        animation-duration: 3s;
        animation-iteration-count: 3;
      }
      .element-two {
        margin: 0;
        background-color: #83bf42;
        animation-duration: 5s;
        animation-iteration-count: 2;
      }
      @keyframes pulse {
        0% {
          left: 0;
        }
        50% {
          left: 50%;
        }
        100% {
          left: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-iteration-count</h2>
    <p>Свойство animation-iteration-count задаёт количество раз, которое цикл анимации должен быть воспроизведён перед остановкой.</p>
    <div class="element-one"></div>
    <div class="element-two"></div>
  </body>
</html>
Попробуйте сами »

Animation-fill-mode

Это свойство задаёт стиль для элемента, применяемый до или после выполнения анимации.

Синтаксис свойства animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Оно может принимать следующие значения:

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

Пример свойства animation-fill-mode со значением “forwards”:

Пример свойства animation-fill-mode со значением “forwards”:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-fill-mode</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-play-state

Это свойство определяет, воспроизводится анимация или приостановлена.

Синтаксис свойства animation-play-state

animation-play-state: paused | running | initial | inherit

Значение по умолчанию — running.

Пример свойства animation-play-state со значением “running”:

Пример свойства animation-play-state со значением “running”:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Пример animation-play-state</h2>
    <p>Здесь animation-play-state установлено в "running".</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Несколько анимаций

Можно объявить несколько анимаций для селектора, нужно лишь разделить значения запятыми.

Пример нескольких анимаций для селектора:

Пример свойства The Animation Property Multiple Animations

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
        0%,
        100% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>
Попробуйте сами »

Практика

Практика

Какие из следующих утверждений об анимации CSS верны?