Einfache Animationen / Übergangseffekte mit CSS3 Transitions

Mit CSS3 ist es extrem einfach geworden kleinere Animationen bzw. Übergangseffekte zu bewerkstelligen, die man vorher vielleicht mit JavaScript gemacht hätte. In den meisten Fällen hätten viele sich die Mühe wahrscheinlich generell gespart und komplett auf animierte Übergänge verzichtet. Dank der CSS3 Transition-Funktion sind genau diese Übergangseffekte nun einfach zu integrieren und die Browser, die nicht damit umgehen können springen direkt ohne Animation zu dem fertigen Übergangswert (:hover).

Um hier einmal ein konkretes Beispiel für CSS3 Transitions zu nennen, würde ich euch bitten einmal einen Blick auf mein neues Portfolio www.Pascal-Bajorat.com zu werfen. Dort findet ihr unter den Überschriften „Auszug aus meinen Referenzen“ und „Meine letzten Publikationen“ Bildreihen die etwas blass wirken, wenn ihr dort mit der Maus herüberfahrt werden die Bilder, mit einer einfachen Übergangsanimation, mit hundertprozentiger Deckkraft dargestellt. Wird ein Browser verwendet der Transitions nicht unterstützt, springen die Bilder direkt und ohne Animation auf die hundertprozentige Deckkraft.

Ein weiteres Beispiel für Transitions werdet ihr sehen, wenn ihr im Kopf der Webseite mit der Maus über das Logo fahrt.

CSS3 Transition mit Opacity

Der CSS Code um diesen Bild-Übergangseffekt zu realisieren, würde nun wie folgt aussehen:

/* Normalzustand */
a img {
opacity: .6;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}
 
/* Zustand bei ":hover" */
a:hover img {
opacity: 1;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}

Es ist wichtig, dass ihr für CSS3 Transitions explizit alle Browser extra über die entsprechenden Vendor-Prefixes (-webkit-, -moz- oder -o-) ansprecht. Auf diese Art und Weise ist eine größtmögliche Kompatibilität gewährleistet, auch wenn die Browser etwas älter sind. Die meisten aktuellen Browser hingegen verstehen in der Regel auch schon die einfachen „transition“ Eigenschaft ohne Vendor-Prefix.

Aufbau der CSS3 transition Funktion:

transition: „zu animierende Eigenschaft“ „Animationsgeschwindigkeit in Sekunden (s) oder Millisekunden (ms)“ „Animationseffekt“;

Beispiel für Eigenschaften die animiert werden können: opacity, height, width, box-shadow, color, background-color, position (top, left, right, bottom) und viele mehr.
Mit dem Attribut „all“ werden alle Eigenschaften animiert die unterstützt werden, dies ist vor allem hilfreich wenn man mehr als nur eine Eigenschaft animieren möchte.

Als Animationseffekt können folgende Werte eingetragen werden: linear, ease, ease-in, ease-out sowie ease-in-out.

Transition mit CSS3 Transform

Um das ganze abzurunden hier noch ein weiteres Beispiel, dabei handelt es sich um den CSS3 Code des Logos, dass sich beim herüber fahren dreht:

/* Normalzustand */
#logo {
-webkit-transition:-webkit-transform 500ms ease-out;
-moz-transition:-moz-transform 500ms ease-out;
-o-transition:-o-transform 500ms ease-out;
transition:transform 500ms ease-out;
}
 
/* Zustand bei ":hover" */
#logo:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
 
-webkit-transition:-webkit-transform 500ms ease-out;
-moz-transition:-moz-transform 500ms ease-out;
-ms-transition:-ms-transform 500ms ease-out;
-o-transition:-o-transform 500ms ease-out;
transition:transform 500ms ease-out;
}

Transition Online-Generator

Wer sich die Transitions mit einem Generator erstellen möchte, kann gerne auf meine HTML5 und CSS3 Toolbox zurückgreifen, hier findet ihr den entsprechenden CSS3 Transition Generator.