cubic-bezier() ist eine CSS-Timing-Funktion, die definiert, wie eine Animation beschleunigt und abbremst. Ihre vier Werte — x1, y1, x2, y2 — sind zwei Kontrollpunkte einer Kurve, die Zeit auf Fortschritt abbildet. Die X-Achse steht für Zeit (0 bis 1), die Y-Achse für den Animationsfortschritt.
Wähle ein Preset oder ziehe die orangefarbenen Kontrollpunkte auf der Leinwand, um deine Easing-Kurve zu formen. Der animierte Ball zeigt genau, wie sich dein Timing anfühlt, und die CSS-Ausgabe ist bereit zum Einfügen in jede Transition oder Animation.
Frequently Asked Questions
Q: Was ist cubic-bezier in CSS?
Was ist cubic-bezier in CSS? Es ist eine Timing-Funktion für Transitions und Animationen, die die Geschwindigkeitskurve definiert: wie schnell eine Animation über die Zeit fortschreitet. Der Standard ist cubic-bezier(0.25, 0.1, 0.25, 1), auch ease genannt.
Q: Was sind die Standard-Easing-Werte?
Was sind die Standard-Easing-Werte? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) und linear = (0, 0, 1, 1).
Q: Wie erzeuge ich einen Bounce-Effekt?
Wie erzeuge ich einen Bounce-Effekt? Überziehe die Y-Werte über 1 hinaus, wie cubic-bezier(0.34, 1.56, 0.64, 1). Die Kurve überschreitet kurz das Ziel und kehrt zurück — ein federnder Bounce.
Q: Warum sieht meine Animation mit negativem Y kaputt aus?
Warum sieht meine Animation mit negativem Y kaputt aus? Negatives Y erzeugt Anticipation — das Element bewegt sich rückwärts, bevor es vorwärts geht. Für Back-Easing ist das beabsichtigt, bei den meisten Inhalts-Transitions wirkt es falsch.
Q: Kann cubic-bezier in Animationen verwendet werden?
Kann cubic-bezier in Animationen verwendet werden? Ja, sowohl in Transitions als auch in @keyframes-Animationen, über die timing-function-Eigenschaft. Es gilt auch für scroll-gebundene Animationen.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.