W3Docs

Тема

Русский

Свойство animation в CSS ​

Свойство 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

html
<!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>
Try it Yourself »

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

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

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

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

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

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

css
@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

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

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

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

html
<!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>
Try it Yourself »

Animation-duration ​

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

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

css
animation-duration: time | initial | inherit

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

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

html
<!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>
Try it Yourself »

Animation-timing-function ​

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

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

css
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”:

html
<!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>
Try it Yourself »

Animation-delay ​

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

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

css
animation-delay: time | initial | inherit

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

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

html
<!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>
Try it Yourself »

Animation-direction ​

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

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

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

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

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

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

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

html
<!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>
Try it Yourself »

Animation-iteration-count ​

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

WARNING

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

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

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

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

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

html
<!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>
Try it Yourself »

Animation-fill-mode ​

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

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

css
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”:

html
<!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>
Try it Yourself »

Animation-play-state ​

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

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

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

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

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

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

html
<!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>
Try it Yourself »

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

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

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

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

html
<!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>
Try it Yourself »

Практика ​

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

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.