Timing und Verzögerung
CSS Transitions bieten mehrere Varianten, wie ein Element animiert werden soll. Dabei bringen die CSS Transitions 5 Vorlagen mit, es können jedoch auch eigene Timing Kurven erstellt werden.
[table='Name,Animation']
[*]linear[*]Konstante Geschwindigkeit
[*]ease[*]Schrittweise langsamer werdend
[*]ease-in[*]Schneller werdend
[*]ease-out[*]Langsamer werdend
[*]ease-in-out[*]Schneller und dann langsamer werdend
[*]cubic-bezier(x1, y1, x2, y2)[*]X und Y sind Werte zwischen 0 und 1 um eine Bézierkurve zu definieren, welche ein eigenes Timing erlaubt.
[/table]
Empfehlung: CSS Easing Animation Tool by Matthew Lein
Mit diesem Tool kann recht einfach eine Bézierkurve erstellt werden, zudem bietet das Tool einige Vorlagen, eine Vorschau und den CSS Code inklusive Vendor-Prefixe.
CSS Transitions bieten mehrere Varianten, wie ein Element animiert werden soll. Dabei bringen die CSS Transitions 5 Vorlagen mit, es können jedoch auch eigene Timing Kurven erstellt werden.
[table='Name,Animation']
[*]linear[*]Konstante Geschwindigkeit
[*]ease[*]Schrittweise langsamer werdend
[*]ease-in[*]Schneller werdend
[*]ease-out[*]Langsamer werdend
[*]ease-in-out[*]Schneller und dann langsamer werdend
[*]cubic-bezier(x1, y1, x2, y2)[*]X und Y sind Werte zwischen 0 und 1 um eine Bézierkurve zu definieren, welche ein eigenes Timing erlaubt.
[/table]
Empfehlung: CSS Easing Animation Tool by Matthew Lein
Mit diesem Tool kann recht einfach eine Bézierkurve erstellt werden, zudem bietet das Tool einige Vorlagen, eine Vorschau und den CSS Code inklusive Vendor-Prefixe.
Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
KEIN PN-Support.
KEIN PN-Support.