Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 4. Januar 2013

easings.net: Bremsen und Beschleunigen mit CSS3

Mit der Einführung von CSS3 sind auch animierte Hover-Effekte und andere Übergänge möglich. Für die Transitions – wie diese Form der Animationen genannt werden – existieren mehrere vordefinierte Effekte, die sogenannten Easings. Sie unterschieden sich in der Art der Beschleunigung und des Abbremsens der Bewegung. Die Seite easings.net hat eine Reihe zusätzlicher Easings zusammengestellt und liefert den passenden Quelltext dazu.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren


Übersicht über alle Easings

Anzeige

Zu den Standard-Easings von CSS3 gehören einfache Ease-In- und Ease-Out-Effekte, die Animationen entweder am Anfang und/oder am Ende abbremsen oder beschleunigen. CSS3 ermöglicht jedoch auch die Definition eigener Easings, die über eine individuelle Bézierkurve definiert werden.

Auf easings.net gibt es eine Galerie mit 30 verschiedenen Animationseffekten, die über die Standard-CSS3-Easings hinausgehen. Für jeden einzelnen Effekt steht eine Vorschau zur Verfügung, in der die Bézierkurve dargestellt und die Bewegung beispielhaft ausgeführt werden kann. Außerdem liefert die Seite für jedes Easing den passenden Quelltext gleich mit dazu.

Easings für CSS3 und jQuery-Plugin

Die Easings, die direkt per CSS3 ausgeführt werden können, erlauben nur relativ einfache Bézierkurven. Komplexere Easings, bei denen beispielsweise ein Abfedern oder eine Elastizität in einer Animation dargestellt werden sollen, lassen sich nur mit Hilfe von JavaScript realisieren.

Daher liefert easings.net nicht nur die Bézierkurven für CSS3, sondern immer auch den richtigen Quelltext für das jQuery-Easing-Plugin, welches sehr viel komplexere Animationsübergänge erlaubt. In dem Plugin sind die 30 vorgestellten Easing-Effekte bereits implementiert, weshalb nur der entsprechende Easing-Name angegeben werden muss.

Easings für SASS

Neben der CSS3- und jQuery-Ausgabe bietet easings.net mit der Erweiterung Ceaser Easing Animation auch eine  Ausgabe für das CSS3-Framework Compass. Die Erweiterung ermöglicht es, vordefinierte Easings einfach zu übernehmen, ohne die entsprechende Bézierkurve angeben zu müssen.

Fazit: easings.net bietet eine sehr schöne Zusammenstellung unterschiedlicher Easing-Effekte samt passenden Quelltextes für unterschiedliche Einsätze.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

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