Animationen mit CSS3 - Teil 6

In diesem 6. Teil der Artikelserie über CSS-Animationen möchte ich nach dem ausführlichen Exkurs zu Keyframe-Animationen noch einmal zu der in den ersten beiden Artikeln (Grundlagen der Gestaltung von Animationen mit CSS3 und transition-Übergänge mit anderen Ereignisse auslösen) behandelten Technik zurückkehren: zur Animation mit transition.

In den beiden ersten Beiträgen zur Animation habe ich gezeigt, dass transition-Animationen durch die Änderung der CSS-Eigenschaften eines HTML-Elementes ausgelöst werden. Ein ganz typischern Fall in diesem Zusammenhang ist die Wirkung von :hover. Mit dem :hover-Zusatz war es schon unter CSS 2.1 möglich, die CSS-Eigenschaften eines HTML-Elementes zu ändern, dies geschah jedoch plötzlich, ohne Verzögerung und Übergänge. Mit transition unter CSS3 ist es nunmehr möglich, diese Zustandsänderung schrittweise und mit Zwischenzuständen vorzunehmen. Allerdings ist eine Beschränkung auf eine Zustandsänderung durch :hover in manchen Fällen hinderlich, vor allem im zweiten Artikel (transition-Übergänge mit anderen Ereignisse auslösen) bin ich daher auch darauf eingegangen, wie man so eine Animation dann auslöst, wenn eine HTML-Seite geladen wird.

Es gibt jedoch noch einen anderen Situationstyp, der für das Auslösen einer transition-Animation sinnvoll eingesetzt werden kann: das Erscheinen eines HTML-Elementes im sichtbaren Bereich des Browser. Dies hat auch mit der Aufmerksamkeit des Webseitenbesuchers zu tun, denn diese ist in starkem maße auf die am unteren Bildschirmrand erscheinenden Inhalte konzentriert.

Grundaufbau der Animation

Die verwendeten Grafiken

Alle getrennt zu animierenden Elemente müssen durch getrennte Grafiken dargestellt werden. Es gibt daher die Grafiken:

Der HTML-Code

Den einzelnen Grafiken entsprechen jeweils div-Layer, die mit eindeutigen Kennungen versehen sind. Außerdem sieht man, dass einige HTML-Elemente auch noch die Klasse ani haben und dass es am Ende des gezeigten HTML-Codes einen Link mit der ID anausbutton gibt. Auf diese beiden Besonderheiten gehe ich am Ende des Beitrages ein.

Die CSS3-Animationen