Hallo liebe/r Leser/in,
ich habe ganz frisch mein mini CMS mit dem Namen simpleCE veröffentlicht und würde mich freuen, wenn du dir mein System ein mal anschauen würdest. Die Info-Seite ist unter simpleCE.com (englisch) zu finden, ein paar Kurzinfos auf deutsch gibt es in diesem Artikel.
Einfache Animationen / Übergangseffekte mit CSS3 Transitions
verfasst von Pascal Bajorat, veröffentlicht am 18. Januar 2012 und 4 mal kommentiert
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.
Related posts:
- Schneller CSS3 für alle Browser schreiben mit CSS3 Prefix Generator (Webservice)
- CSS 3 Unterstützung in IE 6-8 mit CSS3 PIE
- Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen – Tutorial
- HTML5 / CSS3 Box.com – Das Schweizer Taschenmesser für Webentwickler
- HTML5 & CSS3 Video-Training – Animationen mit CSS3
Flattr
Hat dir dieser Artikel, Video-Podcast oder Tutorial gefallen? Dann würden wir uns über deinen Klick auf den Flattr Button freuen. Du hast noch keinen Flattr Account? Hier kostenlos registrieren.
Anzeige - Hier werben…
Kommentar schreiben
Webdesign Podcast auf Facebook
Newsletter
Immer auf dem neusten Stand bleiben, mit unserem Newsletter. Einfach E-Mail eintragen und los geht's
Anzeigen - Hier werben…
Wir benutzen selbst gerne die CSS3 Transitions um kleine Effekte zu setzen.
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
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
Hi,
oh ja das ist ein Fehler. Habe ich direkt geändert, danke für den Hinweis.
Beste Grüße
Pascal