Az animation-play-state tulajdonság

A animation-play-state tulajdonság lehetővé teszi az animáció állapotának beállítását: lejátszódik vagy szünetel.

Szintaxis

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

Értékek

Érték	Leírás
`paused`	Az animáció szünetel.
`running`	Az animáció lejátszódik.

Alapértelmezett érték: running.

Példa

Ebben a példában az animáció akkor indul el, amikor az egérmutatót az elem fölé visszük, és akkor áll le, amikor az egeret az elemről elvisszük:

<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;
}

Példa . Másik elem fölé visszük az egeret

Most az animáció akkor indul el, amikor az egeret egy másik elem fölé visszük, és amikor arról elvisszük - akkor áll le:

<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;
}

Lásd még

a animation-name tulajdonság,
amely megadja az animáció nevét
a animation-duration tulajdonság,
amely megadja az animáció időtartamát
a animation-delay tulajdonság,
amely késleltetést állít be az animáció indítása előtt
a animation-timing-function tulajdonság,
amely megadja az animáció lejátszási sebességét
a animation-iteration-count tulajdonság,
amely megadja az animáció ismétlődéseinek számát
a animation-direction tulajdonság,
amely megadja az animáció irányát
a animation-fill-mode tulajdonság,
amely megadja az animáció állapotát
a animation tulajdonság,
amely az animációs tulajdonságok rövidítése
a @keyframes parancs,
amely megadja az animáció kulcsképeit
a transition sima átmenetek, amelyek az elem fölé vitel animációját jelentik