Animationen mit CSS3 - Teil 2 transition-Übergänge mit anderen Ereignisse auslösen

Im Grundlagenartikel zu CSS3-Animationen mit transition wurde ausschließlich Beispiele gezeigt, bei denen eine transition-Animation durch ein hover-Ereignis ausgelöst wurde. Für bestimmte Anwendungsfälle wäre es aber sehr gut, wenn auch andere Ereignisse eine transition auslösen könnten. So wäre es zum Beispiel vorstellbar, dass eine Art Intro direkt nach dem Laden der Seite ausgeführt wird. Ich erkläre hier, wie man vorgehen kann.

Einfaches Grundlagen-Beispiel

Der zu animierende HTML-Code sieht so aus:

<h2 class="start" id="text1">Hier kommt eine Animation</h2>

Er hat eine eindeutige ID und die Klasse start. Hierzu wird der Ausgangszustand der Animation im CSS-Teil definiert:

#text1.start {
margin-left: 730px;
opacity:0;
}

Zur gleichen ID, aber mit der Klasse animation werden der Endzustand der Animation und die Animationsparameter festgelegt:

.animation #text1 {
margin-left: 0;
opacity: 1;
-webkit-transition: margin-left 1s, opacity 1s;
-moz-transition: margin-left 1s, opacity 1s;
-o-transition: margin-left 1s, opacity 1s;
-ms-transition: margin-left 1s, opacity 1s;
transition: margin-left 1s, opacity 1s;
}

Jetzt ist noch ein kleiner JavaScript-Schnippsel erforderlich:

<script>
window.onload = function() {
  document.body.className = 'animation';
};
</script>

Mit diesem Code wird nach dem Abschluss des Ladens der Seite dem body die Klasse animation zugeordnet. Damit wird .animation #text1 aktiv und die Animation startet. Grundlagen-Beispiel Animation durch andere Ereignisse

Erweiteres Beispiel mit mehrfacher Animation

Dieses Beispiel zeigt, dass mit der gleichen Methode mehrere aufeinander folgende Animationen ausgelöst werden können. Zunächst der erweiterte HTML-Code:

<h2 class="start" id="text1">Hier kommt</h2>
<h2 class="start" id="text2">eine</h2>
<h2 class="start" id="text3">Animation</h2>

Dementsprechend muss sowohl der Animationsausgangspunkt

#text1.start, #text2.start, #text3.start {
margin-left: 730px;
opacity:0;
}

und auch der Endpunkt

.animation #text1, .animation #text2, .animation #text3 {
margin-left: 0;
opacity: 1;
-webkit-transition: margin-left 1s, opacity 1s;
-moz-transition: margin-left 1s, opacity 1s;
-o-transition: margin-left 1s, opacity 1s;
-ms-transition: margin-left 1s, opacity 1s;
transition: margin-left 1s, opacity 1s;
}

für alle drei ID festgelgt werden. Außerdem werden verzögerte Startzeiten für die einzelnen Abschnitte festgelegt:

.animation #text1{
-webkit-transition-delay: 1s, 1s;
-moz-transition-delay: 1s, 1s;
-o-transition-delay: 1s, 1s;
-ms-transition-delay: 1s, 1s;
transition-delay: 1s, 1s;
}

.animation #text2{
-webkit-transition-delay: 2s, 2s;
-moz-transition-delay: 2s, 2s;
-o-transition-delay: 2s, 2s;
-ms-transition-delay: 2s, 2s;
transition-delay: 2s, 2s;
}

.animation #text3{
-webkit-transition-delay: 3s, 3s;
-moz-transition-delay: 3s, 3s;
-o-transition-delay: 3s, 3s;
-ms-transition-delay: 3s, 3s;
transition-delay: 3s, 3s;
}

JavaScript kommt wie im ersten Beispiel zum Einsatz.Beispiel 2 -mehrfache Animation

Erweiteres Beispiel mit anderen Ereignissen

Bei den beiden bisherigen Beispielen wurde das Ereignis window.onload als Trigger genutzt. Es können aber auch andere Ereignisse getriggert werden, zum Beispiele onmousemove oder onmousedown. Dazu erweitert man den JavaScript-Code auf:

<script>
window.onload = function() {
  document.body.className = 'animation';
};
onmousedown = function() {
  document.body.className = '';
};
</script>

Jetzt werden beide Ereignisse getriggert: window.onload führt die erste Animation aus, onmousedown führt die Animation in umgekehrte Richtung aus.

JavaScript kommt wie im ersten Beispiel zum Einsatz.Beispiel 3 - mit onmousemove Animation

Damit auch die reverse Animation korrekt funktioniert, muss der CSS-Code etwas umgestellt werden:

#text1.start, #text2.start, #text3.start {
margin-left: 730px;
opacity:0;
-webkit-transition: margin-left 1s, opacity 1s;
-moz-transition: margin-left 1s, opacity 1s;
-o-transition: margin-left 1s, opacity 1s;
-ms-transition: margin-left 1s, opacity 1s;
transition: margin-left 1s, opacity 1s;
}

#text1.start {
-webkit-transition-delay: 1s, 1s;
-moz-transition-delay: 1s, 1s;
-o-transition-delay: 1s, 1s;
-ms-transition-delay: 1s, 1s;
transition-delay: 1s, 1s;
}

#text2.start{
-webkit-transition-delay: 2s, 2s;
-moz-transition-delay: 2s, 2s;
-o-transition-delay: 2s, 2s;
-ms-transition-delay: 2s, 2s;
transition-delay: 2s, 2s;
}

#text3.start{
-webkit-transition-delay: 3s, 3s;
-moz-transition-delay: 3s, 3s;
-o-transition-delay: 3s, 3s;
-ms-transition-delay: 3s, 3s;
transition-delay: 3s, 3s;
}

.animation #text1, .animation #text2, .animation #text3 {
margin-left: 0;
opacity: 1;
}

Praxisbeispiele

Die bisherigen Beispiele waren rein didaktischer Art. Hier jetzt der Versuch, ein etwas mehr an der Praxis des Webdesigns orientiertes Beispiel zu entwerfen. Eine Bannergrafik soll nicht einfach nur angezeigt werden, sondern schrittweise eingeblendet. Das Ganze soll auch noch so geschehen, dass der Besucher der Website nicht bei jedem Besuch einer weiteren Seite er gleichen Site wieder mit der Animation genervt wird. Hier kann man sich die erste Banneranimation ansehen. Ein Dokumentation des Quellcodes spare ich mir an dieser Stelle.

Bei einer weiteren Banneranimation mit CSS3 wird das Hintergrundbild schrittweise hereingeschoben. Dazu muss das Bild allerdings in fünf gleich große Teile zerschnitten werden. Auch hier wird durch das Setzen eines Cookies verhindert, das die Animation nervt.

Komplexere Animationen

Die bisher vorgestellten Möglichkeiten der Animation mit CSS3-Eigenschaften beruhten auf der Nutzung der transition-Eigenschaft. Wenn man jedoch komplexere Animationen erstellen möchte, dann bietet sich eher die Nutzung von keyframes an. Auf diese CSS-Animationsmöglichkeit gehe ich in den nächsten Beiträge ein. Beginnen wir mit Grundlagen zum Syntax der Keyframe Animation.