Dein Tipp

Komplexe Animationen

Mit Animationen lassen sich komplexe Bewegungsabläufe realisieren. Diese werden explizit ausgelöst, müssen also beispielsweise durch einen onclick-Event getriggert werden. Die Animationen werden aus Schlüsselbildern, sogenannten Keyframes, erzeugt, deren Zwischenschritte interpoliert, also berechnet werden. Die Keyframes werden mit der @-Regel definiert. Folgender Code zeigt eine solche Animation auf:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
	<title>CSS-Animationen</title>
	<style type="text/css" media="screen">
		div {
			width:100px;
			height: 100px;
			padding: 10px;
			position: absolute;
		}
		.testanimation {
			-webkit-animation-name: 'slidedown';
				-webkit-animation-duration: 5s;
		}
		@-webkit-keyframes 'slidedown' {
			0% {
				top: 50px;
				background-color:red;
			}
			20% {
				top: 150px;
				background-color:yellow;
			}
			50% {
				top: 100px;
				background-color:green;
			}
			100% {
				top: 50px;
				background-color:blue;
			}
		}
	</style>
</head>

<body>
	<div onclick="this.className='testanimation'">Tippen Sie hier um die Animation zu starten.</div>
</body>
</html>

Listing 6

CSS-Eigenschaften für komplexe Animationen

-webkit-animation-name

Name der Animation. Bezeichnet die @-Regel.

-webkit-animation-duration

Dauer der Animation.

-webkit-animation-timing-function

Wie -webkit-transition-timing-function. Wird auf einzelne Keyframes angewendet, nicht über die ganze Animation.

-webkit-animation-iteration-count

Anzahl der Wiederholungen der Animation.

-webkit-animation-direction

'normal' spielt die Animation bei jeder Wiederholung von vorne ab. 'alternate' wechselt zwischen vorwärts und rückwärts ab.

-webkit-animation-play-state

Pausiert die Animation.

-webkit-animation-delay

Definiert die Verzögerung, mit der die Animation startet.

-webkit-animation

Fasst die Werte zusammen.

Mit CSS-Animationen lassen sich visuelle Effekte einfacher und effizienter als mit JavaScript bewerkstelligen. Ein großer Vorteil ist auch, dass die Effekte im iPhone mit Hardwarebeschleunigung ausgeführt werden und somit sehr flüssig ablaufen.