201125Mär

Ceaser: Tool für CSS3-Easing-Animationen

Die Animationsmöglichkeiten, die sich durch CSS3 und Easing-Animationen (Transitions) ergeben, dürften mittlerweile allseits bekannt sein. Transitions stellen eine interessante Alternative zu JavaScript-Animationen dar und werden mittlerweile von allen modernen Webbrowsern unterstützt. Das Besondere an CSS3-Transitions spiegelt sich vor allem in der Möglichkeit wider, Easing-Parameter zu definieren: Dadurch lassen sich Bewegungen weicher machen und abbremsen oder beschleunigen.
Damit die Zahlen für die Easing-Parameter nicht manuell eingegeben werden müssen, bietet sich ein kompaktes Tool wie der Ceaser von Matthew Lein an. In einem kleinen Bereich lassen sich die Tangenten der Bewegungskurve grafisch einstellen, die dadurch Einfluss auf Zeit und Geschwindigkeit der Animation haben.

Ceaser - CSS Easing Animation Tool - Matthew Lein

Die Parameter werden in Echtzeit als CSS3-Code ausgegeben und zudem lässt sich die Animation direkt durch neben stehende Schaltflächen testen. So wird eine beispielhafte Farbfläche in ihrer Position, Größe oder Opazität verändert. Per Auswahlmenü können auch vordefinierte Bewegungsabläufe verwendet werden.
Der Ceaser eignet sich sehr gut für das schnelle Erzeugen von realistischen Animationen und überzeugt durch seine einfache Bedienbarkeit. Übrigens bietet die kommende Beta-Version von Google Chrome CSS-3D-Transitions an, die für komplexere Effekte eingesetzt werden können.

RSS-Feed abonnieren