Proprietatea animation-play-state

Proprietatea animation-play-state permite setarea stării animației: aceasta este redată sau este pusă pe pauză.

Sintaxă

selector {
	animation-play-state: paused | running;
}

Valori

Valoare	Descriere
`paused`	Animația este pusă pe pauză.
`running`	Animația este redată.

Valoarea implicită: running.

Exemplu

În acest exemplu, animația va începe la trecerea mouse-ului peste element și se va opri când mouse-ul este mutat în afara elementului:

<div id="elem"></div>

@keyframes move {
	from {
		width: 200px;
	}
	to {
		width: 400px;
	}
}

#elem {
	animation-play-state: paused;
	animation-duration: 1s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	height: 50px;
}
#elem:hover {
	animation-play-state: running;
}

Exemplu . Trecerea peste alt element

Acum, animația va începe la trecerea mouse-ului peste un alt element, iar la îndepărtarea mouse-ului din acel element - se va opri:

<div id="target"></div>
<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#target {
	border: 1px solid red;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
}

#elem {
	animation-play-state: paused;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

#target:hover + #elem {
	animation-play-state: running;
	border: 1px solid green;
}

Vedeți și

proprietatea animation-name,
care setează numele animației
proprietatea animation-duration,
care setează durata animației
proprietatea animation-delay,
care setează întârzierea înainte de executarea animației
proprietatea animation-timing-function,
care setează viteza de executare a animației
proprietatea animation-iteration-count,
care setează numărul de iterații ale animației
proprietatea animation-direction,
care setează direcția animației
proprietatea animation-fill-mode,
care setează starea animației
proprietatea animation,
reprezentând o prescurtare pentru animații
comanda @keyframes,
care setează cadrele cheie ale animației
tranzițiile line transition, reprezentând o animație la trecerea peste element