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

css-свойство animation-play-state (от англ. animation play state – состояние проигрывания анимации) используется для снятия либо постановки анимации на паузу. Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.

Характеристики

Значение по умолчанию: running.
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.animationPlayState="value".

Синтаксис

animation-play-state: running | paused

Значения

running – анимация проигрывается.
paused – анимация поставлена на паузу.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-play-state

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-play-state

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 3em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		}
				
		/* Задаем свойства анимации */ 
		#anim{
		animation-name: example_1, example_2;
		animation-duration: 3s;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		animation-play-state: paused;
		}
				
		@keyframes example_1{
			0% {
			background: #ff0000;
			height: 50px;
			}
			
			50% {
			background: #00ff00;
			height: 400px;
			}
			
			100% {
			background: #0000ff;
			height: 200px;
			}
		}
		
		@keyframes example_2{
			from {
			width: 150px;
			}
			
			to {
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

<div id="anim" onclick="playAnim()"></div>

<script>
		
function playAnim(){
	//Находим наш анимируемый блок
	var animElem=document.getElementById('anim');
	//Если анимация запущена
	if(getComputedStyle(animElem).getPropertyValue('animation-play-state')=='running'){
		//то ставим ее на паузу
		animElem.style.animationPlayState='paused';
	//иначе
	}else{
		//запускаем анимацию
		animElem.style.animationPlayState='running';
	}
}
	
</script>
	
</body>	
</html>

Пример №1