CSS-свойство `animation`

Сокращённое свойство animation CSS задаёт анимацию перехода между стилями. Оно является сокращённой записью для свойств animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state и animation-timeline.

Попробуйте

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

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

Это свойство является сокращённой записью для следующих свойств CSS:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-direction
• animation-iteration-count
• animation-fill-mode
• animation-play-state
• animation-timeline

Синтаксис

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* two animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

Значения

Это свойство задаётся списком значений <animation>, разделённых запятыми. Каждое значение представляет собой список следующих значений, разделённых пробелами:

<keyframes-name> или none

Имя директивы @keyframes, задающей анимацию, применяемую к элементу. Начальное значение animation-name — none.

<animation-duration>

Определяет время, необходимое для завершения одного цикла анимации. Значение должно быть одним из допустимых для свойства animation-duration. Начальное значение — 0s.

<easing-function>

Определяет тип перехода. Значение должно быть одним из допустимых для свойства animation-timing-function. Начальное значение — ease.

<animation-delay>

Определяет время ожидания между применением анимации к элементу и её началом. Значение должно быть одним из допустимых для свойства animation-delay. Начальное значение — 0s.

<single-animation-direction>

Направление воспроизведения анимации. Значение должно быть одним из допустимых для свойства animation-direction. Начальное значение animation-direction — normal.

<single-animation-iteration-count>

Количество воспроизведений анимации. Значение должно быть одним из допустимых для свойства animation-iteration-count. Начальное значение animation-iteration-count — 1.

<single-animation-fill-mode>

Определяет, как применять стили к целевому элементу анимации до и после её выполнения. Значение должно быть одним из допустимых для свойства animation-fill-mode. Начальное значение animation-fill-mode — none.

<single-animation-play-state>

Определяет, воспроизводится ли анимация. Значение должно быть одним из допустимых для свойства animation-play-state. Начальное значение animation-play-state — running.

<single-animation-timeline>

Определяет временную шкалу, используемую для управления ходом анимации. Значение должно быть одним из допустимых для свойства animation-timeline. Начальное значение — auto.

Описание

Свойство animation задаётся одной или несколькими отдельными анимациями, разделёнными запятыми. Каждая animation в списке анимаций, разделённых запятыми, задаёт свойства animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state и animation-timeline. Если какие-либо компоненты не указаны в объявлении animation, их значения устанавливаются равными начальным значениям соответствующих компонентов.

animation-name

Компонент <animation-name> каждой анимации задаёт её имя, которым может быть none, <custom-ident> или <string>. Начальное значение animation-name — none. Это означает, что если в сокращённом свойстве animation не указано значение animation-name, ни к одному из свойств не применяется анимация.

Порядок других значений в определении анимации важен для того, чтобы отличить значение animation-name от других значений. Если значение в сокращённой записи animation можно интерпретировать как значение свойства анимации, отличного от animation-name, сначала оно будет применено к этому свойству, а не к animation-name. Поэтому рекомендуется указывать значение animation-name последним в списке значений при использовании сокращённой записи animation; это правило действует и при указании нескольких анимаций, разделённых запятыми, с помощью сокращённой записи animation.

Значения времени

Каждая анимация может содержать ноль, одно или два значения <time>. Порядок значений времени в определении каждой анимации важен: первое значение, которое можно интерпретировать как <time>, присваивается свойству animation-duration, а второе — свойству animation-delay.

Если в сокращённом свойстве animation не указано значение animation-duration, длительность по умолчанию равна 0s. В этом случае анимация всё равно будет выполняться (будут вызваны события animationStart и animationEnd), но пользователь не увидит анимацию.

animation-timeline

Если в сокращённой записи animation не указано значение <animation-timeline>, объявление сбросит все ранее заданные значения animation-timeline до auto, которое устанавливает временную шкалу по умолчанию — documentTimeline.

Если значение <animation-timeline> указано, но пользовательский агент не поддерживает значения <animation-timeline> в сокращённой записи, всё объявление animation считается недействительным и игнорируется. Поэтому при создании анимаций CSS, управляемых прокруткой, свойство animation-timeline необходимо объявить после любой сокращённой записи animation, чтобы оно вступило в силу.

Также <animation-timeline> можно задать в сокращённой записи animation внутри блока CSS @supports, например:

@supports (animation: view()) {
  /* CSS for browsers supporting <animation-timeline> within `animation` shorthand */
}

animation-fill-mode и новые контексты наложения

При значении animation-fill-mode forwards анимированные свойства ведут себя так, как если бы они были включены в заданное значение свойства will-change. Если во время анимации создаётся новый контекст наложения, целевой элемент сохраняет этот контекст после завершения анимации.

Доступность

Мигание и вспышки при анимации могут создавать трудности для людей с когнитивными нарушениями, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движения могут провоцировать вестибулярные расстройства, эпилепсию, мигрень и повышенную светочувствительность.

Предусмотрите возможность приостанавливать или отключать анимацию, а также используйте медиазапрос reduced motion @media, чтобы обеспечить альтернативный интерфейс для пользователей, предпочитающих уменьшенное количество анимации.

• Создание более безопасной веб-анимации для людей с повышенной чувствительностью к движению — A List Apart (2015)
• Введение в медиазапрос reduced motion — CSS-Tricks (2017)
• Адаптивный дизайн для движения — WebKit (2017)
• Руководство WCAG: пункт 2.2 — Достаточное время: предоставьте пользователям достаточно времени для чтения и использования содержимого
• Понимание критерия успеха WCAG 2.2.2: Пауза, остановка, скрытие — W3C (2026)

Формальное определение

Формальный синтаксис

animation = 
  <single-animation>#

<single-animation> = 
  <'animation-duration'> ||
  <easing-function> ||
  <'animation-delay'> ||
  <single-animation-iteration-count> ||
  <single-animation-direction> ||
  <single-animation-fill-mode> ||
  <single-animation-play-state> ||
  [ none | <keyframes-name> ] ||
  <single-animation-timeline>

<easing-function> = 
  <linear-easing-function> |
  <cubic-bezier-easing-function> |
  <step-easing-function>

<single-animation-iteration-count> = 
  infinite |
  <number>

<single-animation-direction> = 
  normal |
  reverse |
  alternate |
  alternate-reverse

<single-animation-fill-mode> = 
  none |
  forwards |
  backwards |
  both

<single-animation-play-state> = 
  running |
  paused

<keyframes-name> = 
  <custom-ident> |
  <string>

<single-animation-timeline> = 
  auto |
  none |
  <dashed-ident> |
  <scroll()> |
  <view()>

<linear-easing-function> = 
  linear |
  <linear()>

<cubic-bezier-easing-function> = 
  ease |
  ease-in |
  ease-out |
  ease-in-out |
  <cubic-bezier()>

<step-easing-function> = 
  step-start |
  step-end |
  <steps()>

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )

<view()> = 
  view([<axis> || <'view-timeline-inset'>]?)

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]>, <number> ]#{2} )

<steps()> = 
  steps( <integer>, <step-position>? )

<scroller> = 
  root |
  nearest |
  self

<axis> = 
  block |
  inline |
  x |
  y

<integer> = 
  <number-token>

<step-position> = 
  jump-start |
  jump-end |
  jump-none |
  jump-both |
  start |
  end

Примеры

Основы: восход солнца

В этом примере мы показываем основы использования сокращённого свойства animate: жёлтое солнце движется по светло-голубому небу. Солнце поднимается к центру области просмотра, а затем скрывается из виду.

HTML

Для изображения солнца мы добавляем один элемент <div>.

<div class="sun"></div>

CSS

Сначала создадим солнце и небо. Небо — это :root HTML-документа. Мы скрываем содержимое, выходящее за пределы области просмотра: в нашем случае это часть солнца ниже горизонта. Для этого задаём свойству overflow значение hidden. Также мы используем свойство justify-content, чтобы расположить солнце по центру фона. Мы делаем солнце жёлтым, задаём его height равной высоте области просмотра (100vh), а ширину приравниваем к высоте, задавая свойству aspect-ratio значение 1. С помощью свойства border-radius превращаем квадрат <div> в круг.

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1;
  animation: 4s linear 0s infinite alternate sunrise;
}

Затем мы задаём несколько директив анимации @keyframes, которые перемещают элемент за пределы области просмотра, а затем возвращают его в исходное положение с помощью CSS-трансформаций:

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

Осталось применить анимацию! С помощью сокращённого свойства animation мы применяем ключевую анимацию sunrise к .sun <div>. Анимация настроена на бесконечное число повторений, каждое длится 4 секунды; направление анимации меняется при каждом повторении:

.sun {
  animation: 4s linear 0s infinite alternate sunrise;
}

Результат

Применение нескольких анимаций

В этом примере показано, как применить несколько анимаций к одному элементу. Расширим предыдущий пример с солнцем, восходящим и заходящим на светло-голубом фоне: теперь мы будем постепенно поворачивать солнце через все цвета радуги. Положение солнца и его цвет изменяются независимо друг от друга.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
}

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

Мы используем те же HTML и CSS, что и в предыдущем примере, и добавляем второй набор директив анимации @keyframes, чтобы применить filter, который проходит через все возможные значения оттенка с помощью функции фильтра hue-rotate():

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

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

.sun {
  animation:
    4s linear 0s infinite alternate sunrise,
    24s linear 0s infinite psychedelic;
}

Результат

Каскадирование нескольких анимаций

В этом примере показано, что происходит, когда несколько анимаций задают значения одного и того же свойства. Пример основан на примере основного использования: применяются две анимации, обе задающие значение свойства transform.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
}

Мы используем те же HTML и CSS, что и в первом примере, включая исходную анимацию sunrise, и добавляем вторую анимацию с именем bounce. Обе анимации задают значения одного и того же свойства:

@keyframes sunrise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

Мы применяем к солнцу обе анимации. Если две анимации задают разные значения одного свойства, анимации, объявленные позже в каскаде, переопределяют объявленные ранее. В этом случае значение transform в анимации bounce «побеждает» в каскаде и переопределяет трансформацию, заданную sunrise, поэтому солнце будет двигаться только по горизонтали.

.sun {
  animation:
    4s linear 0s infinite alternate sunrise,
    4s linear 0s infinite alternate bounce;
}

Результат

Солнце перемещается между левой и правой сторонами области просмотра. Солнце остаётся в области просмотра, несмотря на то что задана анимация sunrise. Свойство transform анимации sunrise переопределяется анимацией отскока.

Спецификации

Совместимость с браузерами

См. также

• Использование CSS-анимаций
• API AnimationEvent JavaScript