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.

Dieser Beitrag wurde unter CSS3 abgelegt und mit , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf CSS3 Transitions: Texte transformieren mit ’scale‘

  1. Bap sagt:

    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

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *