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

Schreibe einen Kommentar

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

WhatsApp chat

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen