Verschiedene Animationen für :hover an und aus

Normalerweise hat jeder CSS-Container die selbe Animation für das aktivierende und deaktivierende Hover – Ereignis (mit der Maus das Feld betreten bzw. verlassen). Mir bekannt waren bisher nur verschiedene Animationenstechniken in Zusammenhang mit JavaScript-Frameworks wie JQuery oder mootools bekannt. Doch auch mit reinem CSS3 kann man verschiedene CSS :hover Animationen realisieren. Der folgende einfache Trick realisiert die verschiedenen Animation für hover an und hover aus. Beachte: Der Code-Schnipsel funktioniert nur in Browsern, die transitions unterstützen (z.B. webkit-Browser). Das CSS3-Modul Transition und Animation eignen sich besonders um Interaktivität ohne JavaScript oder Flash auf die eigene Seite zu bringen.

#thing {
   padding: 5px;
   border-radius: 10px;

  /* HOVER OFF */
   -webkit-transition: padding 4s;
}

#thing:hover {
   padding: 25px;
   border-radius: 20px;

  /* HOVER ON */
   -webkit-transition: border-radius 4s;
}

Wenn man die Maus über das Feld bewegt, überschreibt die transition den regulären Zustand. Wenn die Maus das Feld wieder verlässt, wird der reguläre Zustand wieder hergestellt, indem die im Originalzustand definierte Animation ausgeführt wird. Der Einsatz von CSS3 hat gegenüber den JavaScript bzw. Flashlösungen einige Vorteile:

• es wird kein JavaScript benötigt
• es werden keine Frameworks benötigt
• die Animationen stören keine Skripte
• kein Flash wird benötigt
• weniger Speicherplatz verbrauch => geringere Übertragunsgzeit übder das Internet