27. Mai 2016

CSS3 bietet interessante Transition-Effekte, welche Beispielsweise weiche Übergänge erzeugen. In der Webentwicklung können Transition-Effekte in Kombination mit Hover Animationen dafür genutzt werden, um Bilder und Elemente eine Webseite zu animieren. Mit einfachen Definitionen lassen sich ansprechende Hover Animationen erstellen.

Hover Animationen aus technischer Sicht

Bilder zu verändern, stellt nicht nur für Webdesigner die Möglichkeit zu einer intensiveren Auseinandersetzung mit dem Content beizutragen und die Navigation der Website zu verbessern sondern bietet auch den Besucher auf der Seite mehr Aktivität.

Die Erstellung der Animation erfolgt mittlerweile konsequent über CSS3. Hier wird die Transition-Eigenschaft, durch zwei Zustände definiert. Einerseits werden bei der Hover Animationen der Ausgangszustand und der Endzustand festgelegt und durch die Transition die zu verändernde Eigenschaft. Werden Hover Animationen erstellt, die mehrere Eigenschaften des Elements verändern, so ist das mit CSS3 kein Problem mehr.

Hover Animationen mit css3

Hover Animationen mit css3

 

Browserunabhängige Hover Animationen erstellen

Beim Erstellen von Hover Animationen zusammen mit dem Gebebrauch der Transition-Eigenschaft, müssen je Browser auch noch eigene Vendor-Prefixes verwendet werden. Beim Erstellen von Hover Animationen für alte Browser, ohne CSS3-Support muss auf Javascript zurückgegriffen werden.

Hover Animationen begeistern User

Durch die Nutzung von Hover Animationen verhilft man einer Website zu Leben und kann Besucher zu mehr Interaktion anregen. Die gestalterischen Möglichkeiten beim Erstellen von Hover Animationen sind sehr umfangreich und so können Geschwindigkeit, Verzögerung und Animationskurven definiert werden.

hover Animation

hover Animation