Stelle Dauer, Verzögerung und Easing mit Reglern ein, sieh die gezeichnete cubic-bezier-Kurve, vergleiche Transitions mit @keyframes und kopiere 20 Hover-Mikrointeraktionen, die Reduced Motion respektieren.
Eine CSS-Transition animiert eine Eigenschaft fließend, wenn sich ihr Wert ändert, zum Beispiel beim Hover: transition: transform 200ms ease-out. Sie braucht einen Start- und einen Endzustand und läuft einmal pro Änderung. @keyframes-Animationen definieren ihre eigenen Schritte, können sich wiederholen und starten ganz ohne Zustandsänderung. Animiere transform und opacity für die flüssigsten Ergebnisse.
transition, Teil für Teil
Der Playground animiert ein echtes Element zwischen zwei Zuständen, mit der Eigenschaft, Dauer, Verzögerung und dem Easing deiner Wahl, und zeichnet das Easing als Kurve, damit du siehst, warum ease-out flott und ease-in träge wirkt. Weiter unten findest du zwanzig Hover- und Fokuseffekte, die du live bearbeiten und in jede Website einfügen kannst.
Eine Transition reagiert auf eine Wertänderung, etwa wenn eine Klasse hinzugefügt wird oder ein Hover beginnt, und geht nur vom alten zum neuen Wert. Eine Animation nutzt @keyframes, kann viele Schritte haben, sich wiederholen oder abwechseln und läuft, sobald sie angewendet wird. Nutze Transitions für Zustandswechsel und Keyframes für Ladeanzeigen und Hingucker.
Häufige Ursachen: Die Eigenschaft ist nicht animierbar (display war es nicht, bis allow-discrete kam), der Startwert ist auto (height: auto lässt sich ohne neuere Features nicht interpolieren), das Element wurde gerade eingefügt und hat daher keinen vorherigen Style, oder die Transition ist nur im Hover-Zustand deklariert und springt beim Verlassen mit der Maus zurück.
transform und opacity kann meist der Compositor übernehmen, ohne Layout neu zu berechnen oder neu zu zeichnen, daher bleiben sie flüssig. Wenn du width, height, top, left oder margin animierst, wird in jedem Frame das Layout neu berechnet, und box-shadow oder filter lösen Neuzeichnen aus, was auf langsameren Handys ruckeln kann.
Es beschreibt die Easing-Kurve mit zwei Kontrollpunkten, cubic-bezier(x1, y1, x2, y2). Die x-Werte stehen für die Zeit und müssen zwischen 0 und 1 bleiben; die y-Werte stehen für den Fortschritt und dürfen diesen Bereich verlassen, was ein Überschwingen oder ein kleines Zurückfedern erzeugt.
Nutze die Media Query @media (prefers-reduced-motion: reduce), um Bewegung zu verkürzen oder zu entfernen. Ein einfacher Ansatz: Farb- und Deckkraftänderungen behalten, aber Transforms weglassen, oder transition-duration und animation-duration in dieser Query auf einen winzigen Wert setzen.
Wann du was verwendest
Rendering-Aufwand pro Frame (Faustregel, je nach Browser verschieden)
Behält Zustandswechsel bei, entfernt aber die Bewegung. Setze es nahe ans Ende des Stylesheets.
Eine Verbesserung für Browser, die allow-discrete und @starting-style unterstützen. Andere blenden sofort ein und aus.
Bewege die Maus über jedes Ergebnis oder fokussiere es, um es laufen zu sehen. Jedes Snippet endet mit einer Regel für Reduced Motion.
Hebt eine Karte an und vertieft ihren Schatten.
Eine leichte Vergrößerung beim Hover und ein Eindrücken beim Klick.
Die Linie wächst von links über eine Hintergrundgröße.
Hintergrund- und Textfarbe tauschen gemeinsam.
Das Icon bewegt sich, während das Label stillsteht.
Ein Plus wird zu einem Kreuz.
Der Outline-Abstand animiert sich für Tastaturnutzer.
Das Bild skaliert, aber der Rahmen schneidet es ab.
Die Bildunterschrift gleitet vom unteren Rand nach oben.
Ein farbiger Schatten blendet sich ein.
Ein paar Grad Drehung lassen einen Sticker locker wirken.
Die Rahmenfarbe wechselt von Grau zum Markenblau.
Beim Hover über ein Element verblassen seine Geschwister.
Ein heller Streifen zieht beim Hover darüber.
Eine als Schalter gestaltete Checkbox mit gleitendem Knopf.
Der Marker dreht sich, wenn sich ein details-Element öffnet.
Ein sich wiederholender Statuspunkt, gebaut mit @keyframes.
Lineares Timing hält die Drehung gleichmäßig.
fill-mode both hält es während der Verzögerung versteckt.
Ein kurzes horizontales Wackeln, das hier einmal beim Hover abläuft.
Easing-Kurve cubic-bezier({values})
Vorwärts abspielen
Rückwärts abspielen
Dein Gerät wünscht reduzierte Bewegung, daher springt die Vorschau, statt sich zu bewegen.
Zu animierende Eigenschaft
Dauer: {n}ms
Verzögerung: {n}ms
Easing-Presets
CSS kopieren
Kostenlos starten · Keine Kreditkarte nötig