animation-play-state

Baseline Широко распространённая

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

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

Попробуйте

Возобновление приостановленной анимации начнёт её с того момента, на котором она была приостановлена, а не с начала последовательности анимации.

Синтаксис

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

Значения

running: Анимация в работе.
paused: Анимация приостановлена.

Примечание: При указании нескольких значений через запятую для свойства animation-*, они применяются к анимациям в порядке появления animation-name. В случаях, когда количество анимаций и значений свойства animation-* не совпадает, обратитесь к разделу Установка нескольких значений свойства анимации.

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

Начальное значение	`running`
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

animation-play-state = 
  <single-animation-play-state>#  

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

Примеры

Приостановка анимации

Эта анимация приостановлена, но воспроизводится при наведении курсора.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

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

См. Анимации CSS для примеров.

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

Спецификация
CSS Animations Level 1 # animation-play-state

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`animation-play-state`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	92	4.01.0	434.4
`paused`	3	12	5	15	4	18	5	14	3.2	1.0	4.4
`running`	3	12	5	15	4	18	5	14	3.2	1.0	4.4

См. также

Использование CSS анимаций
JavaScript AnimationEvent API
Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timeline, animation-timing-function

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state