Depot43-Unterlagen - Transition in KeyFrame

Transition in KeyFrame

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition in KeyFrame</title>
	<style>
	div.anim {
		width:100px;
		height:100px;
		background-color:red;
		animation: myAnimation 5s infinite;
		animation-timing-function: linear;
	}
		
	@keyframes myAnimation {
		0% {
			transform: translate(0, 0);
		}
		25% {
			transform: translate(100px, 0);
		}
		50% {
			transform: translate(100px, 100px);
		}
		75% {
			transform: translate(0, 100px);
		}
		100% {
			transform: translate(0, 0);
		 }
	}
	</style>
</head>
<body>
	<p>CSS "transform" erlaubt weiche Übergänge mit klarem "animation-timing"</p>

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


 

            

Innerhalb der KeyFrame-Animation können die verschoedenen CSS-Eigenschaften benutzt werden. So auch "transition".

DB-Table: transition-keyframe