Depot43-Unterlagen - Animation Fill

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Animation Fill</title>
	<style>
		div.anim {
			width: 100px;
			height: 100px;
			background: grey;
			position :relative;
			animation: myanim 5s 3;
			animation-delay: 5s;
			animation-fill-mode: backwards;
		}
		@keyframes myanim {
			0%   { width:50px}
			100% { width:150px;background: red;}
		}
	</style>
</head>
<body>
	<p><strong>animation-fill </strong>definiert den Zustand vor und nach der Animation.</p>

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


 

            

animation-fill

Definiert .den Zustand des Animationsobjekts vor oder nach der Animation. "forwards" zeigt den Endzudtand, "backwards" zeigt den Anfangszustand.

animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both