CSS свойство animation

Определение и применение

Свойство animation задаёт основные параметры одной или нескольких CSS-анимаций в одном объявлении. Задавайте его анимируемому элементу вместе с правилом @keyframes.

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

В списке перечислены основные значения компонентов; их ограничения и параметры функций описаны по ссылкам. Глобальные значения initial, inherit, unset, revert и revert-layer применяются ко всему объявлению animation, а не к отдельному компоненту внутри него. Значение длительности auto относится к расширениям Level 2; особенности поддержки приведены ниже.

Обратите внимание на важный момент: порядок свойств в списке не задаёт обязательный порядок значений animation. Большинство компонентов можно переставлять, но первое значение времени всегда задаёт длительность, а второе — задержку. Имя анимации может быть указано как в начале, так и в конце записи; рекомендуется ставить его последним, чтобы избежать неоднозначности с ключевыми словами других компонентов.

Для грамотного применения анимации на ваших страницах рекомендую ознакомиться с возможностями и алгоритмами работы всех вышеприведённых свойств в индивидуальном порядке.

Основы — в уроке об анимациях CSS. В генераторе анимаций можно выбрать эффект, настроить время и получить готовый CSS.

Попробуйте значения animation

Короткая запись выбирает анимацию, длительность, функцию времени, повторение и направление.

Значение свойства

animation: none

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">CSS</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  animation: none;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

Поддержка браузерами

Спецификация: CSS animations

Поддерживается во всех основных браузерах с 2016 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.animation
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
animation✓43✓12✓16✓30✓9✓43✓16✓30✓9✓4.0✓43✓9
alternate✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
alternate-reverse✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
animation-timeline included in shorthand◐115◐115×◐101×◐115×◐77×◐23.0◐115×
auto✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
backwards✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
both✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
ease✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
ease-in✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
ease-in-out✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
ease-out✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
forwards✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
infinite✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
linear✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
none✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
normal✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
paused✓3✓79✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
reverse✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
running✓3✓79✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
step-end✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
step-start✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Основной синтаксис ниже соответствует CSS Animations Level 1. Level 2 расширяет его значениями auto для длительности и временной шкалой animation-timeline; поддержка этих расширений отличается от поддержки основного свойства. Для совместимого кода задавайте временную шкалу отдельным объявлением после animation.

CSS синтаксис:

CSS
/* Одна или несколько анимаций */
animation: [ <time [0s,∞]> || <easing-function> || <time>
  || [ infinite | <number [0,∞]> ]
  || [ normal | reverse | alternate | alternate-reverse ]
  || [ none | forwards | backwards | both ]
  || [ running | paused ]
  || [ none | <custom-ident> | <string> ] ]#;

/* Глобальные значения */
animation: initial | inherit | unset | revert | revert-layer;

|| означает один или несколько компонентов в любом порядке, | разделяет варианты, скобки группируют их, # — список через запятую. <time> — время с единицей s или ms, диапазон [0s,∞] исключает отрицательную длительность; <number [0,∞]> — неотрицательное число повторов. <easing-function> — функция времени, <custom-ident> или <string> — имя ключевых кадров.

JavaScript синтаксис:

JavaScript
element.style.animation = "2s ease-in-out 500ms 3 alternate both running travel";

Начальное значение свойства

Начальные значения составляющих в Level 1:

  • animation-name — none;
  • animation-duration — 0s;
  • animation-timing-function — ease;
  • animation-delay — 0s;
  • animation-iteration-count — 1;
  • animation-direction — normal;
  • animation-fill-mode — none;
  • animation-play-state — running.

Значения свойства

Значения animation
Значение Описание
<custom-ident> | <string> | none animation-name: имя ключевых кадров; начальное значение.
Первое <time> animation-duration: длительность цикла; начальное значение.
<easing-function> animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(), steps() или linear(); начальное значение.
Второе <time> animation-delay: задержка, в том числе отрицательная; начальное значение.
<number [0,∞]> | infinite animation-iteration-count: число циклов; начальное значение.
normal | reverse | alternate | alternate-reverse animation-direction: направление; начальное значение.
none | forwards | backwards | both animation-fill-mode: применение результата до и после активной части; начальное значение.
running | paused animation-play-state: воспроизведение или пауза; начальное значение.
none 0s ease 0s 1 normal none running Совокупность начальных значений компонентов в Level 1. Начальное значение.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства animation устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Порядок значений и сброс настроек

У большинства компонентов порядок свободный. Первое время всегда задаёт длительность, второе — задержку: animation: 2s 500ms travel. Чтобы задать только задержку, всё равно укажите длительность перед ней. Имя удобно писать последним: слова вроде linear сначала распознаются как значения других компонентов.

Пропущенные компоненты сбрасываются к начальным значениям, а не сохраняют предыдущие настройки. Например, animation: 2s travel отменит ранее заданные бесконечные повторы. Глобальное значение применяется ко всему объявлению; его нельзя смешивать со списком отдельных анимаций.

Связанные расширения, включая animation-timeline, диапазон animation-range-start/animation-range-end и animation-composition, также могут сбрасываться сокращённым объявлением. Задавайте их после него. Значения animation-range не включаются в эту краткую запись.

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

Разделяйте настройки запятыми. Для одновременных эффектов используйте отдельные свойства, например движение и прозрачность:

CSS
animation: 2s linear infinite travel, 1s ease-in-out infinite alternate pulse;

Имена travel и pulse должны соответствовать вашим @keyframes. Без имени анимации нет; при нулевой длительности временная анимация выполняется мгновенно, но fill-mode всё ещё может повлиять на вид элемента.

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

CSS Animations Level 1.

CSS Animations Level 2 — расширения свойства.

Наследуется

Нет.

Анимируемое

Нет.

Примеры, попробуйте сами

Сокращённая запись анимации

Измените 3s на 1s, а alternate на normal. Скорость и направление задаются одним свойством animation.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
style.css
CSS
.box {
    animation: travel 3s linear infinite alternate;
}

/* Длина пути зависит от ширины дорожки: пример помещается на телефоне. */
@keyframes travel {
    from {
        left: 0;
        background: #a64400;
    }
    to {
        left: calc(100% - 42px);
        background: #16703c;
    }
}

Две анимации одновременно

Блок A только движется, блок B одновременно движется и меняет прозрачность. Вторая анимация записана после запятой. Измените её длительность с 1s на 3s: скорость движения останется прежней.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
style.css
CSS
.box {
    animation: 4s linear infinite alternate travel;
}
.second .box {
    /* У каждого эффекта своя длительность и функция времени. */
    animation:
        4s linear infinite alternate travel,
        1s ease-in-out infinite alternate pulse;
}
@keyframes travel {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 42px);
    }
}
@keyframes pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.25;
    }
}

Порядок длительности и задержки

В исходном коде A ждёт 1s и движется 2s, B ждёт 2s и движется 1s. Обе анимации заканчиваются через 3s. Поменяйте два времени местами и сравните старт и скорость. Чтобы повторить, снимите и снова установите флажок.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
style.css
CSS
.box {
    /* Первое время — длительность, второе — задержка. */
    animation: 2s 1s linear forwards travel;
}
.second .box {
    animation: 1s 2s linear forwards travel;
}
@keyframes travel {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 42px);
    }
}

Сброс пропущенных настроек

Блок A повторяет движение, а B выполняет только один цикл: более поздняя запись animation сбрасывает infinite к начальному значению 1. Добавьте infinite в сокращённую запись для B и сравните результат. Флажок позволяет запустить анимации заново.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.track {
    position: relative;
    height: 70px;
    margin-top: 16px;
    border: 1px dashed #607589;
    background: #edf2f5;
}
.box {
    position: absolute;
    top: 12px;
    left: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #245a85;
    color: white;
}
.run:not(:checked) ~ .track .box {
    animation-name: none;
}
index.html
HTML
<input class="run" type="checkbox" id="run" checked />
<label for="run">Запустить анимацию</label>
<div class="track"><span class="box">A</span></div>
<div class="track second"><span class="box">B</span></div>
style.css
CSS
.box {
    animation-name: travel;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.second .box {
    /* Пропущенный iteration-count сбрасывается к 1. */
    animation: 2s linear travel;
}
@keyframes travel {
    from {
        left: 0;
    }
    to {
        left: calc(100% - 42px);
    }
}