CSS3-Transitions intuitiv erstellen: Ceaser
Mit der CSS3-Eigenschaft transition habt Ihr die Möglichkeit animierte Objekte und Übergänge zu erstellen. Ein häufig verwendetes Beispiel ist der Hover-Effekt in einer Navigation.
Um mit Transitions arbeiten zu können muss einem Objekt zunächst mitgeteilt werden auf welche Eigenschaften sich die Animation auswirken soll. Doch auch die Art der Animation spielt eine große Rolle. So kann eine Animation linear ablaufen oder zum Anfang und Ende hin ein wenig abbremsen, was in der Regel zu einem natürlicheren Bewegungsablauf führt. Die Optionen sind hier sehr umfangreich.
Ein nützliches Tool um Geschwindigkeit und Beschleunigung einer Animation intuitiv festzulegen ist Ceaser.
Workshops und Seminare von kulturbanause
Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …
In Ceaser habt Ihr die Möglichkeit aus bestehenden CSS3-Eigenschaften zu wählen oder alle Angaben selbst festzulegen. Neben der Dauer kann auch die Art der Animation festgelegt werden. Für sehr individuelle Bewegungsabläufe kann sogar mit der Mouse der Pfad detailliert angepasst werden.
Sinnvoll ist es sicher auch sich die Standard-Einstellungen, die in CSS3 zur Verfügung stehen, anzuschauen und zu verstehen welche Eigenschaft für welche Art von Animation steht.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
4 Kommentare
Kommentar verfassen
Cyrille
Verfasst am 1. April 2011 um 19:14 Uhr.
„Your browser does not support CSS transitions. Firefox 4, Safari & Chrome have what it takes.“
Schön, soll ich damit verstehen dass ich mit Forefox nix damit anfangen kann? :/
Jonas Hellwig
Verfasst am 2. April 2011 um 7:59 Uhr.
@Cyrille: Soweit ich weiss kann Firefox ab Version 3.7 CSS-Transitions. Der IE9 kann sie auch. Chrome und Safari sowieso.
Je nach Browser muss die entsprechende Rendering-Engine angesprochen werden.
Dominik
Verfasst am 2. April 2011 um 9:19 Uhr.
Wie muss ich das bei dem IE9 machen weil bei mir klappt das leider nicht hab -webkit -moz -o und das normale aber bei IE9 geht es nicht
Jonas Hellwig
Verfasst am 2. April 2011 um 10:32 Uhr.
-ms- ist das Präfix für den IE. Oder er kann es schon ganz ohne Präfix.