CSS3 Transitions: Texte transformieren mit ’scale‘

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.