Depot43-Unterlagen - Animation Timing

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Animation Timing</title>
	<style>
		div.anim {
			width: 100px;
			height: 100px;
			background: red;
			position :relative;
			animation: myanim 5s infinite;
			animation-timing-function: ease-in;
		}

		@keyframes myanim {
			0%   { left: 0px;}
			100% { left: 300px;}
		}
	</style>
</head>
<body>
	<p><strong>animation-timing </strong>verändert die dynamik der Animation</p>

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


 

            

animation-timing

Die Timingfunktion wird zwischen dem Start und Ende der Animation angewndt. Sie verändert die Dynamik der Animation, kann beschleunigen oder abbremsen.

/* Schlüsselwortwerte */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Funktionswerte */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Mehrere Animationen */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);