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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
animation-play-state43.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.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-statecss3, анимация возобновляется, когда курсор покидает элемент.

Пример использования CSS свойства animation-play-state .
Пример использования CSS свойства animation-play-state.
CSS свойства