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

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

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

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animation, чтобы установить все свойства анимации в одном объявлении.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation-play-state	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.animationPlayState = "running"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Состояние анимации в CSS</title>
<style> 
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
color : white; /* устанавливаем цвет шрифта белый */
background : green; /* устанавливаем цвет заднего фона */
position: relative;  /* элемент с относительным позиционированием */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s;  /* задаём продолжительность анимации */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
animation-play-state: running;  /* указываем, что анимация воспроизводится (значение по умолчанию)  */
} 
.test:hover {
animation-play-state: paused;  /* указываем, что анимация приостанавливается при наведении мышью  */
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px;} 
	75%  {left: 200px;} 
	100% {left: 0px;} 
} 
</style>
</head>
	<body>
		<div class = "test">наведи на меня</div>
	</body>
</html>

В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.

При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state css3 , анимация возобновляется, когда курсор покидает элемент.

CSS свойства