W3docs
ru
Войти

Свойство CSS animation

Узнайте о свойстве CSS animation, используемом для анимирования элементов. Синтаксис, подсвойства, @keyframes и примеры.

Свойство CSS animation позволяет анимировать элементы — постепенно изменять одно или несколько значений CSS с течением времени — без единой строки JavaScript. Оно работает со свойствами, значения которых поддаются интерполяции, например с размерами макета (border, height, width), положением (left, top), размером шрифта, цветом и прозрачностью.

На этой странице рассматривается сокращённое свойство animation, все восемь отдельных подсвойств animation-*, правило @keyframes, которое ими управляет, запуск нескольких анимаций одновременно, а также учёт предпочтений пользователей, которые предпочитают уменьшенное движение. animation является одним из свойств CSS3.

Анимация состоит из двух частей: правила @keyframes, описывающего как элемент выглядит в определённые моменты времени, и свойства animation (или его подсвойств) на элементе, которое указывает как воспроизводить эту временную шкалу — как долго, сколько раз, в каком направлении и т. д.

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

Информация

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

Правило @keyframes

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

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

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

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

Пример свойства 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> с «зелёного» до «серого».

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

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

СвойствоНазначениеОбщие значения
animation-nameПравило @keyframes для воспроизведенияимя, none
animation-durationПродолжительность одного цикла2s, 500ms (по умолчанию 0s — без анимации)
animation-timing-functionКривая скорости в каждом циклеease, linear, ease-in-out, cubic-bezier(…)
animation-delayЗадержка перед началом1s, -2s (отрицательное значение запускает анимацию с середины)
animation-iteration-countКоличество повторенийчисло, infinite
animation-directionВперёд, назад или туда-обратноnormal, reverse, alternate
animation-fill-modeСтили до/после выполненияnone, forwards, backwards, both
animation-play-stateЗапущена или на паузеrunning, paused

Рассмотрим связанные свойства анимации в действии.

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

@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-iteration-count, анимация воспроизведётся один раз).

Animation-name

Это свойство задаёт имя правила @keyframes, которое нужно применить.

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

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

Пример свойства 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 example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
Попробуйте сами »

Animation-duration

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

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

animation-duration: time | initial | inherit

Пример свойства 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»:

<!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 example</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 example</h2>
    <p>Here the animation starts after 3 seconds.</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:

<!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 example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-iteration-count

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

Внимание

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

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

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

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

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

<!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>The animation-iteration-count example</h2>
    <p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</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»:

<!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 example</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Animation-play-state

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

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

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

Значение по умолчанию — 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 example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>
Попробуйте сами »

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

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

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

Пример нескольких анимаций с помощью свойства animation

<!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>
Попробуйте сами »

Учёт предпочтений уменьшенного движения

Активное или непрерывное движение может вызывать тошноту, головокружение или мигрень у некоторых пользователей. Операционные системы предоставляют настройку «уменьшить движение», и вы можете учесть её с помощью медиазапроса prefers-reduced-motion — отключая анимацию (или делая её менее заметной) для таких пользователей, сохраняя её для остальных.

.element {
  animation: pulse 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

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

Типичные ошибки

  • Без animation-duration анимации нет. Продолжительность по умолчанию равна 0s, поэтому ключевые кадры никогда не успевают отработать.
  • Ключевые слова и значения auto не анимируются. Как уже было сказано, свойства вроде display, visibility и height: auto не поддаются интерполяции. Вместо них анимируйте opacity и transform — они к тому же наиболее производительны.
  • forwards работает только при конечном числе итераций. animation-fill-mode: forwards удерживает последний ключевой кадр после завершения анимации; при значении infinite анимация никогда не заканчивается, и удерживать нечего.
  • В сокращённой записи порядок значений времени важен. Первое значение <time> — это продолжительность, второе — задержка.

Связанные свойства

  • @keyframes — задаёт временную шкалу анимации.
  • animation-name — указывает, какое правило @keyframes воспроизводить.
  • transition — анимирует переход между двумя состояниями по триггеру, например :hover.
  • transform — перемещает, масштабирует и вращает элементы (идеально подходит для анимации).

Практика

Практика
Какие из следующих утверждений о CSS-анимации верны?
Какие из следующих утверждений о CSS-анимации верны?
Was this page helpful?