Depot43-Unterlagen - Animation Basis

HTML Elemente

            
            



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

		@keyframes myanim {
			from   { left: 0px; }
			to  { left: 300px; }
		}
	</style>
</head>
<body>
	<p>Basis-Code einer CSS-Animation</p>

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


 

            

Basis-Code einer CSS animation

Das animierte Element wird aufgerufen:

CSS-Eigenschaft: animation
Werte: KeyFrame-Bezeichner - Zeitraum der Animation - Anzahl/unendlich

        div.anim {
            animation: myanim 5s infinite;
        }

Zum Gestalten des animierten Elements können alle gewünschte CSS-Eigenschaften verwendet werden.

KeyFrame Funktion, welche mit dem Element aufgerufen wird:

        @keyframes myanim {
            from   { left: 0px; }
            to  { left: 300px; }
        }

Anfang der Sequenz: from { left: 0px; } - Ende der Sequenz: to { left: 300px; }