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

Свойство CSS animation-play-state указывает, запущена анимация или она приостановлена. Если возобновить приостановленную анимацию, она начнётся с того места, на котором была остановлена, а не с начала последовательности анимации. Кроме того, анимацию можно запустить из состояния паузы.

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

Свойство animation-play-state является одним из свойств CSS3.

В JavaScript это свойство можно использовать для приостановки анимации в середине цикла.

Начальное значение	running
Применяется ко	Всем элементам. Также применяется к псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.animationPlayState = "paused";

Синтаксис

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

css

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

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

Пример свойства CSS 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 example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

Try it Yourself »

В следующем примере анимация остановится при наведении курсора.

Пример свойства animation-play-state со значением "paused":

Пример свойства CSS animation-play-state со значением paused

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
      }
      div:hover {
        animation-play-state: paused;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>Hover over the green box to stop the animation.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
running	Значение по умолчанию, когда анимация запущена.	Запустить »
paused	Анимация приостановлена.	Запустить »
initial	Устанавливает свойству значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

В чём заключается функция CSS-свойства 'animation-play-state'?

Оно указывает, запущена анимация или приостановлена.Оно определяет скорость анимации.Оно передаёт эффект анимации дочерним элементам.Оно определяет цвет анимации.Оно перезапускает анимацию при переключении из состояния 'paused' в 'running'.

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

Синтаксис ​

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

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