Ratgeber: Animationen mit CSS3

So erstellen und animieren Sie das Android-Logo

Sie möchten mit CSS3 Animationen basteln? Wir zeigen Ihnen anhand eines selbst erstellten Android-Logos, wie sich dies mit CSS3 umsetzen lässt.

Autoren: Anna Kobylinska und Filipe Pereira Martins • 24.9.2012 • ca. 6:00 Min

Sie möchten mit CSS3 Animationen basteln? Wir zeigen Ihnen an Hand eines selbst erstellten Android-Logos, wie sich dies mit CSS3 umsetzen lässt.

Wir zeigen Ihnen mit Hilfe des Android-Logos, wie Sie Animationen schnell und unkompliziert mit CSS3 umsetzen können. Ein animiertes Android-Logo lässt sich ganz ohne den Einsatz von Bildern mit reinem CSS umsetzen. Als Grundlage dient etwa das folgende Markup:...

Um das Markup aufs Wesentliche zu reduzieren, entsteht der Kopf des Droids aus demselben Element, das die beiden Augen und die beiden Antennen beinhaltet. Das <div>-Element, das die Brust ausmacht, umfasst außerdem beide Arme und Beine. Sicherheitshalber wird der Browser mittels

div {margin: o; padding: 0;}

zurückgesetzt. Mittels

div {background: #A4CA39; position: relative;}

werden die einzelnen Elemente eingefärbt und relativ positioniert. Im ersten Schritt entsteht ein einfaches Rechteck:

.android{ height: 404px; width: 334px; margin: 100px auto; }

Der Kopf und die beiden Augen entstehen mittels:

.kopf{ width: 220px; height: 100px; top: 32px; border-radius: 110px 110px 0 0; -moz-border-radius: 110px 110px 0 0; -webkit-border-radius: 110px 110px 0 0; -webkit-transition: all 0.1s ease-in; } .linkesAuge, .rechtesAuge { background: #fff; width: 20px; height: 20px; position: absolute; top: 42px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .linkesAuge {left: 50px;} .rechtesAuge {right: 50px;}

Damit auch die beiden Antennen das Licht der Welt erblicken, genügt:

.linkeAntenne, .rechteAntenne{ width: 6px; height: 50px; position: absolute; top: -34px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

Noch liegen die beiden Antennen allerdings genau übereinander. Damit sie die korrekte Position einnehmen, müssen sie noch verschoben und gedreht werden:

.linkeAntenne { left: 50px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); } .rechteAntenne { right: 50px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); }

Der Rumpf des Droids besteht einfach aus einem Rechteck mit zwei spitzen und zwei abgerundeten Ecken, der sich mit einem geringen Abstand direkt unter dem Kopf anordnet:

.brust{ width: 220px; height: 184px; top: 40px; border-radius: 0 0 25px 25px; -webkit-border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; }

Die beiden Arme und Beine des Droids haben einige Eigenschaften gemeinsam, und zwar:

.linkerArm, .rechterArm, .linkesBein, .rechtesBein { width: 50px; position: absolute; -webkit-transition: all 0.1s ease-in; }

Die beiden Arme rechts und links weisen genau dieselbe Form auf:

.linkerArm, .rechterArm { height: 150px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; }

Gleiches gilt für die beiden Beine:

.linkesBein, .rechtesBein { height: 100px; top: 162px; border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; -webkit-border-radius: 0 0 25px 25px; }

Noch liegen allerdings alle vier Glieder direkt übereinander. Die beiden Arme und die beiden Beine erhalten jetzt die gewünschte Position mittels:

.linkerArm {left: -58px;} .rechterArm {right: -58px;} .linkesBein {left: 45px;} .rechtesBein {right: 45px;}

Dank einiger hover-Animationen lässt sich das Android-Logo zum Leben erwecken. Möglichkeiten zur Umsetzung interessanter Effekte gibt es viele. So könnte der Droid beim Kontakt mit der Maus blinken, mit einer Antenne winken, einen Arm beziehungsweise ein Bein bewegen:

.linkerArm:hover, .linkesBein:hover{ -webkit-transform: rotate(30deg) translate(-30px, 0); -transform: rotate(30deg) translate(-30px, 0); -moz-transform: rotate(30deg) translate(-30px, 0); -ms-transform: rotate(30deg) translate(-30px, 0); } .rechterArm:hover, .rechtesBein:hover{ -webkit-transform: rotate(-30deg) translate(30px, 0); -transform: rotate(-30deg) translate(30px, 0); -moz-transform: rotate(-30deg) translate(30px, 0); -ms-transform: rotate(-30deg) translate(30px, 0); }

Und/oder der Kopf lässt sich wie der Deckel einer Schatztruhe aufklappen:

.kopf:hover { -webkit-transform: rotate(-5deg) translate(-5px, -8px); -transform: rotate(-5deg) translate(-5px, -8px); -moz-transform: rotate(-5deg) translate(-5px, -8px); -ms-transform: rotate(-5deg) translate(-5px, -8px); }

Animationen mit CSS3: Präfixfreie Animationen

Beim Einsatz von CSS Transforms und CSS Transitions erkennt man den Abschluss einer Animation anhand eines Ereignisses vom Typ praefixTransitionEnd. Hierbei steht die Zeichenkette praefix als Platzhalter für das herstellerspezifische Präfix, also bei Webkit-Browsern wie Chrome oder Safari webkitTransition-End und bei Opera oTransitionEnd. Firefox-Browser erwarten gar kein Präfix, dafür eine konsequente Kleinschreibung der Anweisung, also transitionend. In Chrome und Safari können Sie mit dem Code

document.addEventListener('webkitTransitionEnd', function(e) { console.log(e); }, false);

das Ereignisobjekt in der Konsole aufzeichnen. Wenn Sie mehrere Animationen gleichzeitig handhaben wollen, müssen Sie diese Ereignisse auseinander halten. Hierzu können Sie entweder Ihren Ereignisauswerter einzeln an jedes Element binden oder sich die Ereignisübertragung zu Nutze machen. In diesem Fall binden Sie das Ereignis an das Dokument einfach wie oben gezeigt und können dann mittels e.target das jeweilige DOM-Element identifizieren, welches zuletzt animiert wurde (beispielsweise mittels e.target.cssKlasse oder e.target.cssID).

Geht es nach dem W3C, so müssen Sie sich über die bisher stetig ansteigende Zahl von herstellerspezifischen Präfixen aber bald keine Sorgen mehr machen, da das W3C diese schrittweise abzuschaffen gedenkt. Bei den neuesten Builds aus dem Developer-Zweig von Google Chrome und den Nightly Builds von Safari wurden bereits einige Präfixfreie CSS3-Eigenschaften eingeführt.

Der Trend zu HTML5 und CSS3 wurde unter anderem durch die Frustration der Webdesigner in puncto Inkompatibilität der Rendering Engines bei den älteren Webstandards angetrieben. Der Durchbruch von Mobilgeräten wie zum Beispiel Tablets und Smartphones wäre ohne HTML5 und CSS3 nie in diesem Umfang möglich gewesen. Responsives und adaptives Design sind nun in aller Munde, nicht zuletzt weil moderne Browser wie Google Chrome und Apples Safari mit ihren webkitbasierten Rendering Engines ganz neue Rekorde im Hinblick auf die W3C-Konformität und die Rendering-Geschwindigkeit gesetzt haben. Browser-Dinosaurier wie der IE 6 zählen mit einem Marktanteil von unter einem Prozent endlich zum sprichwörtlichen Schnee von gestern. Dennoch ist die Dominanz webkitbasierter Browser nicht nur ein Segen, sondern zum Teil auch ein Fluch: Indem die Gemeinde der Webdesigner jetzt vorwiegend nur noch Webkit-Präfixe einsetzt, bleiben Browser wie Firefox, Opera und IE 9/10 immer öfter außen vor. Mozilla und Opera wissen sich daher zum Teil nur noch dadurch zu helfen, dass sie die Unterstützung von -webkit-Präfixen implementieren und sich als ein Google-Chrome- beziehungsweise ein Apple-Safari-Browser ausgeben, wie Sie auf w3.org nachlesen können.

Opera hat im neuesten Opera Mobile Emulator eben diese unkonventionelle Gegenmaßnahme ergriffen und probeweise die Unterstützung für -webkit-Präfixe der Webkit-Browserfamilie eingebaut. Präfixgebundene CSS3-Eigenschaften wie etwa Animationen sind dem W3C und allen, die sich an die offiziellen Standards halten, natürlich ein Dorn im Auge. Lea Verou hat mit der CSS3-Bibliothek -prefix-free das Problem sicherlich entschärft.

Doch eines ist gewiss, auch -prefix-free hilft nur wenig, wenn man es mit importierten und über Kreuz verlinkten CSS3-Dateien zu tun hat. Lea Verous gelungene -prefix-free-Bibliothek ist nur als eine Übergangslösung gedacht, bis das W3C CSS-Eigenschaften wie beispielsweise Transformationen, Übergänge und Animationen standardisiert und den "Präfixsalat" gleich an der Quelle entschärft.

Eigentlich waren CSS3-Präfixe ja nur als eine kurze Übergangslösung gedacht, um die Zeit zu überbrücken zwischen dem Vorschlagen, Standardisieren und der abschließenden Implementierung in modernen Browsern. Stattdessen hat sich der CSS3-Standard in mindestens drei Zweige, nämlich in -webkit, -mozilla und -ms gesplittet. Und niemand möchte sich auf die Dauer mit umständlichen Browserweichen und Improvisationen wie den -prefix-free-Bibliotheken beschäftigen müssen.