CSS свойство animation-play-state

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

Свойство animation-play-state приостанавливает или продолжает CSS-анимацию элемента. Возобновление после паузы сохраняет достигнутое положение, а не запускает цикл заново.

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

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

paused останавливает анимацию. Здесь смена значения пересоздаёт сцену, поэтому running запускает её сначала, а не продолжает с сохранённого времени.

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

animation-play-state: running

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-name: travel;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}
@keyframes travel {
  from {
    transform: translateX(-55px);
  }
  to {
    transform: translateX(55px);
  }
}
@keyframes turn {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(30deg);
  }
}

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

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

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

Показать браузеры
Совместимостьcss.properties.animation-play-state
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
animation-play-state✓43✓12✓16✓30✓9✓43✓16✓30✓9✓4.0✓43✓9
paused✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2
running✓3✓12✓5✓15✓4✓18✓5✓14✓3.2✓1.0✓4.4✓3.2

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

CSS синтаксис:

CSS
animation-play-state: [ running | paused ]#;

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

Знак # означает одно или несколько значений через запятую. Знак | разделяет варианты. Квадратные скобки группируют варианты.

JavaScript синтаксис:

JavaScript
element.style.animationPlayState = "paused";

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

running.

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

Значения animation-play-state
Значение Описание
running Анимация воспроизводится; после паузы продолжается с сохранённого времени. Начальное значение.
paused Воспроизведение приостановлено. Если пауза наступила во время задержки, отсчёт задержки тоже останавливается.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства animation-play-state устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Значения через запятую соответствуют именам в animation-name по порядку. Если значений меньше, список повторяется; лишние значения не используются.

Пауза и повторный запуск

Переключение завершившейся анимации на running не запускает её заново. Для нового запуска можно удалить и затем снова применить имя анимации. В редактируемом примере ниже флажок меняет только animation-play-state, поэтому демонстрирует именно продолжение после паузы.

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

CSS Animations Level 1.

Наследуется

Нет.

Анимируемое

Нет.

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

Пауза и продолжение

Снимите флажок «Движение», затем включите его: анимация продолжится с остановленного места. Правило paused в учебном коде отвечает за паузу.

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;
}
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-name: travel;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

.run:not(:checked) ~ .track .box {
    animation-play-state: paused; /* Продолжаем с этого же места при включении. */
}

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