Animationen mit CSS3 - Teil 4 Keyframe Animationen anhalten und wieder starten

Im vorherigen Artikel habe ich die Grundlagen der CSS3-Keyframe-Animation erklärt.

Wir haben gesehen, dass so eine Animation entweder eine bestimmte Anzahl von Iterationen durchläuft oder unendlich ist. Wir wollen jedoch dem Besucher der Website die Chance geben, die Animation selbst anzuhalten, sei es um ein Detail der Keyframe-Animation zu betrachten oder weil die unaufhaltsame Animation als störend empfunden wird. Ich habe für die Erklärung der Vorgehensweise eine Pacman-Animation erstellt, bei der der Pacman unaufhaltsam von links nach rechts und wieder zurück über den Bildschirm huscht und nach einem Cookie schnappt.

HTML-Code der Animation

Der Pacman wird aus unterschiedlichen Teilen zusammengesetzt, die alle durch div-Elemente repräsentiert werden:

<!-- Die gesamt Animation -->
<div id="pacman-holder" class="moving ani">
	<!-- Pacman -->
	<div id="pacman-container" class="ani">
		<div id="pacman-body" class="ani">
			<div id="pacman-auge" class="ani">
			</div>
		</div>
		<div id="pacman-mouth" class="ani">
			<div id="pacman" class="ani"></div>
		</div>
	</div>
	<!-- Der Punkt -->
	<div id="dot" class="ani"></div>
</div>

Alle diese Elemente haben einen eindeutigen Bezeichner (ID), der der Zuweisung von CSS3-Eigenschaften dient. Außerdem haben alle zu bewegenden Elemente noch class="ani". Dazu später.

CSS-Code der Keyframe-Animation

Der CSS-Code wird hier nur in der Standardnotation widergegeben, die Varianten mit den browserspezifischen Präfixen habe ich aus Gründen der Übersichtlichkeit weggelassen.

#pacman-holder{
   position:relative;
   width:200px;
   margin:0 auto;
}

#pacman-container {
   display:block;
   width:100px;
   height: 100px;
   transform:rotate(45deg);
   animation: bite 0.5s linear infinite;
}

#pacman-body {
   background-color: #ff0;
   position: absolute;
   width: 100px;
   height: 100px;
   border-radius: 50px;
}

#dot {
     background-color: #fff;
     position: absolute;
     z-index:0;
     top:40px;
     left:200px;
     width: 20px;
     height: 20px;
     border-radius: 50px;
     animation: movedot 0.5s linear infinite;
     animation-delay:0.2s;
}

#pacman {
     position: absolute;
     width: 100px;
     height: 100px;
     border-radius: 50px;
     clip: rect(0px, 50px, 100px, 0px);
     z-index:2;
}

#pacman-mouth {
	position: absolute;
	left:2px;
	width: 102px;
	height: 102px;
	border-radius: 50px;
	clip: rect(0px, 100px, 100px, 52px);
}

#pacman-auge {
	position: absolute;
	/* top:45px;*/
	left:20px;
	background:#000;
	width: 16px;
	height: 16px;
	border-radius: 8px;
}

#pacman-mouth #pacman {
    background-color: #222;
    transform:rotate(90deg);
    animation: munch 0.5s linear infinite;
    border: 3px solid #222;
}

#pacman-holder.moving{
    width:100px;
    animation: move 4.7s linear infinite;
}

#pacman-holder.moving .dot{
    animation: movedot 1s linear infinite;
    animation-delay:0.2s;
}

@keyframes munch
{
	0% {
		transform:rotate(90deg);
	}
	50% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(90deg);
	}
}

@keyframes bite
{
	0% {
		transform:rotate(45deg);
	}
	50% {
		transform:rotate(90deg);
	}
	100% {
		transform:rotate(45deg);
	}
}

@keyframes movedot 
{
	0% {
		left:200px;
	}
	100% {
		left:50px;
	}
}

@keyframes move
{
	0% {
		transform: scaleX(1);           
		left:-300px;
	}

	49.999% {
		left:300px;
		transform: scaleX(1);
	}
	50%{
		left:300px;
		transform: scaleX(-1);
	}

	100% {
		left:-300px;
		transform: scaleX(-1);     
	}          
}

Soweit ist die Animation jetzt fertig. Um sie stoppen zu können, benötigen wie etwas JavaScript-Code.

Der JavaScript-Code

Der Benutzer soll die Animation anhalten und wieder in Gang setzen können. Das geht nur mit JavaScript. Dabei wird wie folgt vorgegangen:

• Variable anis initialisieren
• nach dem Laden der Seite alle Objekte ( mit querySelectorAll) mit der Klasse ani in der Variablen anis speichern.
• Allen Elementen in anis mit AnimationPlayState (bzw. MozAnimationPlayState für Firefox bzw. webkitAnimationPlayState für Webkit-Browser wie Chrome, Safari und neuerdings auch Opera) den Status running zuweisen.

Mit der Funktion schalte() kann nun der Status für alle Elemente in anis von running auf paused und wieder zurück gesetzt werden:

function schalte(){
    for ( var i = 0; i < anis.length; i++ ) {
        if ( anis[i].style.webkitAnimationPlayState === 'running' ) {
            anis[i].style.webkitAnimationPlayState = 'paused';
        } else {
            anis[i].style.webkitAnimationPlayState = 'running';
		}
        if ( anis[i].style.MozAnimationPlayState === 'running' ) {
            anis[i].style.MozAnimationPlayState = 'paused';
        } else {
            anis[i].style.MozAnimationPlayState = 'running';
        }
        if ( anis[i].style.AnimationPlayState === 'running' ) {
            anis[i].style.AnimationPlayState = 'paused';
        } else {
            anis[i].style.AnimationPlayState = 'running';
        }
    }      
}

Die Animiation kann man sich hier ansehen.

Die Beispiel-Animation enthält neben dem Schalter zum Anhalten und Starten der Animation noch weitere Schalter, mit denen sich einzelne Animationselemente ausblenden und wieder anzeigen lassen.