Animation Play State

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Animation Play State</title>
	<style>
		div.anim {
			width: 300px;
			height: 100px;
			background: red;
			position :relative;
			animation-play-state: paused;
		}
		div.anim:hover {
			animation-play-state: running;
			animation: darueber 1s;
		}

		@keyframes darueber {
			0%   { background:red;}
			50%   { background:yellow;}
			100% { background: red;}
		}
	</style>
</head>
<body>
	<p><strong>animation-play-state </strong>Spielen und pausieren der Animation</p>

	<div class="anim"></div>
</body>
</html>


 

            

animation-play-state

Wird nur CSS verwendet, steht kein "wirklich brauchbarer" Event-Handler bereit. Mit einer CSS Regel auf einem Element, kann das Pseudoelement ":hover" verwendet werden. Eignet sich nicht für alle Arten von Animation.

/* Einzelne Animation */
animation-play-state: running;
animation-play-state: paused;

/* Mehrere Animationen */
animation-play-state: paused, running, running;

DB-Table: animation-play-state