W3docs
ru
Войти

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

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

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

Пауза не сбрасывает прогресс: когда вы возобновляете анимацию, она продолжается с того места, где была остановлена, а не начинается заново с первого ключевого кадра. Это делает animation-play-state идеальным для кнопок «воспроизвести/пауза» и для остановки движения, пока пользователь наводит курсор на элемент или взаимодействует с ним.

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

Когда использовать

  • Пауза при наведении — останавливайте зацикленную анимацию (бегущую строку, спиннер, карусель) при наведении курсора, чтобы пользователи могли читать или взаимодействовать с элементом.
  • Кнопки воспроизведения/паузы — переключайте значение из JavaScript по клику, как кнопка воспроизведения в медиаплеере.
  • Отложенный запуск — объявите анимацию в состоянии paused, а затем переключите на running, когда выполнится нужное условие (элемент прокрутится в область видимости, данные загрузятся и т. д.).

Это свойство является одним из свойств анимации CSS3 и входит в сокращённое свойство animation вместе с animation-name, animation-duration и animation-iteration-count.

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

Когда вы назначаете элементу несколько анимаций, разделённых запятыми, каждое значение animation-play-state соответствует по порядку анимации на той же позиции в animation-name. Например, animation-play-state: paused, running ставит первую анимацию на паузу, а вторую запускает. Если состояний указано меньше, чем имён, значения повторяются для оставшихся.

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

Синтаксис

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

Примеры

Значение "running"

running является значением по умолчанию, поэтому данный пример ведёт себя одинаково независимо от наличия этого объявления — блок скользит один раз за 10 секунд:

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

Пауза при наведении со значением "paused"

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

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

Переключение воспроизведения/паузы через JavaScript

Вы можете читать и задавать значение из скрипта через свойство animationPlayState объекта style элемента. Именно так работает кнопка воспроизведения/паузы:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
        animation-play-state: paused;
      }
      @keyframes play {
        from { left: 0px; }
        to { left: 200px; }
      }
    </style>
  </head>
  <body>
    <button id="toggle">Play</button>
    <div id="box"></div>
    <script>
      const box = document.getElementById("box");
      const button = document.getElementById("toggle");
      button.addEventListener("click", () => {
        const paused =
          getComputedStyle(box).animationPlayState === "paused";
        box.style.animationPlayState = paused ? "running" : "paused";
        button.textContent = paused ? "Pause" : "Play";
      });
    </script>
  </body>
</html>

Анимация начинается в состоянии paused, поэтому ничего не движется до тех пор, пока пользователь не нажмёт кнопку. Каждый щелчок переключает состояние и обновляет подпись кнопки.

Значения

Свойство принимает одно ключевое слово (или список через запятую — по одному на каждую анимацию):

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

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

animation-play-state поддерживается во всех современных браузерах — Chrome, Edge, Firefox, Safari и Opera. Свойство не анимируется, поэтому его изменение вступает в силу немедленно, без перехода между состояниями.

Практика

Практика
Что делает CSS-свойство 'animation-play-state'?
Что делает CSS-свойство 'animation-play-state'?
Was this page helpful?