CSS3 bietet etwas, das bisher nur mit JavaScript möglich war: Animation.
Bisher musste eine Animation, also eine graduelle Änderung von Eigenschaften über einen festgelegten Zeitraum, relativ mühsam per JavaScript programmiert werden.
Mit CSS3 gibt es jetzt die einfache und elegante Lösung: CSS3 Transitions.
Link „aufglühen“ lassen per CSS3 Transition
Kleine feine Effekte verleihen einer Website das gewisse Etwas. Sehr elegant sind zum Beispiel „aufglühende“ Links, die nicht einfach beim hovern mit einem Schlag die Farbe ändern, sondern langsam heller werden.
Für die Transition reichen zwei Zeilen CSS, plus eine Zeile für die rote Farbe:
/* CSS3 Stylesheet */
transition-duration: 1.0s;
transition-timing-function: ease-out;
color: #FF4B33;
Der nachfolgende Links ist im Ausgangszustand blau. Durch den hover Effekt wird die Transition angestoßen und der Link verändert die Farbe graduell innerhalb einer Sekunde zu rot:
Texte mit Transitions: color
CSS3 Transition mit scale
Im Prinzip lässt sich jeder Unterschied zwischen dem :link und dem :hover Zustand per transition in animierter Weise ändern.
Fügen wir unserem Code noch ein scale hinzu, können wir auch die Textgröße schwungvoll ändern:
transform: scale(1.2);
Der skalierbare Link:
Texte mit Transitions: scale
Browserkompatibilität von CSS3 Transitions
Die transitions funktionieren in den derzeitigen Browserversionen nur durch Voranstellen der proprietären Herausgeberkürzel, also
-moz
-webkit
-ms
Der CSS3 Code für eine (halbwegs) cross-browser kompatible Lösung für aufglühende Links per Transition sähe also so aus
a.skalColor:hover {
transition-duration: 1.0s;
transition-timing-function: ease-out;
-moz-transition-duration: 1.0s;
-moz-transition-timing-function: ease-out;
-webkit-transition-duration: 1.0s;
-webkit-transition-timing-function: ease-out;
-ms-transition-duration: 1.0s;
-ms-transition-timing-function: ease-out;
}
Bei unseren Tests konnten jedoch nur Firefox und Safari die Transitions umsetzen.
Ich arbeite als Fachinformatiker und neben meinem Hauptfeld Systemintegration erstelle ich auch Webseiten und arbeite mit html, css, php, mysql und ein bisschen js (meist fertige Tools aus dem Netz).
Die Funktion mit scale ist echt geil aber leider wird sie halt nur von Firefox unterstützt. Da die meisten Firmenkunden unseres Unternehmens mit IE arbeiten, ist sie für mich allerdings uninteressant da ich sie nicht verwenden kann. Über cross-browsing als Alternative ist es überflüssig weil dann eine Lösung mit js nur einmal programmiert werden muss.
Immer dasselbe… der Browser unterstützt das, der nächste wieder was anderes usw usw