HTML / CSS

Einfache Animationen / Übergangseffekte mit CSS3 Transitions

WordPress Entwickler und Webdesigner

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).

Einfache Animationen / Übergangseffekte mit CSS3 Transitions

Anzeige:




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.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

4 Antworten zu “Einfache Animationen / Übergangseffekte mit CSS3 Transitions”

    • Hi,
      danke für das Kommentar und CSS3 Transitions bieten ja auch wirklich eine tolle Möglichkeit Webseiten einfach aufzuhübschen.
      Ich habe dein Kommentar allerdings etwas anpassen müssen, bitte nutzt die Kommentarfunktion nicht um Backlinks mit entsprechenden Keywords zu generieren.
      Habe deinen Namen angepasst und die URL entfernt, sorry.

      LG
      Pascal

  1. Hallo,
    ich hab gerade mal deine HTML5 und CSS3 Toolbox ausprobiert und ich glaube dir hat sich bei de CSS3 Transitions ein Fehler eingeschlichen.
    Dort gibt es das Attribut „weight“ das müsste doch eigentlich „width“ heißen?

    Viele Grüße

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.