CSS-Tools · läuft in Ihrem Browser

Cubic-Bezier-Editor

Easing-Kurven formen und live in einer Animation beobachten.

Keine Anmeldung Kein Dateilimit Nichts wird hochgeladen

Cubic-Bezier-Editor

So wird es benutzt 3 Schritte
  1. Wählen Sie ein Vorlage oder setzen Sie P1 und P2 selbst.
  2. Drücken Sie Erneut abspielen, um die Bewegung in Ihrer Dauer zu sehen.
  3. Drücken Sie CSS kopieren und fügen Sie es in Ihr Stylesheet ein.
Generiertes CSS






	Die vertikale Achse läuft absichtlich über 0 und 1 hinaus: Kontrollpunkte außerhalb dieses Bereichs erzeugen Überschwingen und Anlauf. Die horizontale Achse kann das nicht — eine Kurve, deren x den Bereich 0–1 verlässt, ist keine Funktion der Zeit und wird von Browsern abgelehnt. Das bewegte Quadrat nutzt exakt die Kurve aus dem CSS darunter — was du siehst, wird ausgeliefert.


			


			
			
					

			
So funktioniert dieses Werkzeug


							
Eine Timing-Funktion beschreibt nicht, wohin sich etwas bewegt, sondern wie der Fortschritt der Animation auf die Zeit abgebildet wird. Die Kurve läuft auf beiden Achsen von null bis eins, waagerecht die verstrichene Zeit, senkrecht, wie weit das Element in der Veränderung ist. Eine gerade Diagonale ist eine lineare Animation. Die Krümmung ist es, die Bewegung natürlich wirken lässt, denn nichts in der physischen Welt beginnt und endet mit gleichbleibender Geschwindigkeit.

			
							
Vier Zahlen setzen die beiden Kontrollpunkte, und die Kurve wird als SVG-Pfad gezeichnet, daneben ein Ball, der die Bewegung bei jeder Wertänderung wiederholt. Diese Wiederholung braucht einen erzwungenen Reflow zwischen dem Zurücksetzen der Transition und dem Setzen der neuen, sonst fasst der Browser beide Schreibvorgänge zusammen und scheinbar geschieht nichts. Die Ausgabe kommt als Transition und als Animation, denn beide nutzen dieselbe Funktion.

			
												
Die Kurve lesen und eine Form wählen

								
    
																	
  • 
															Steilheit ist Geschwindigkeit:
														Wo die Kurve steil ansteigt, bewegt sich das Element schnell; wo sie flach wird, steht es fast still. Ein langer flacher Auslauf ist der häufigste Grund dafür, dass sich eine Animation am Ende zäh anfühlt.						
    • 
																	
  • 
															Die senkrechte Achse darf den Bereich von null bis eins verlassen:
														Werte über eins schießen über das Ziel hinaus und kehren zurück, und genau das ergibt ein Nachfedern. Die waagerechte Achse kann das nicht, denn die Zeit läuft nicht rückwärts.						
    • 
																	
  • 
															Ease-out passt zu Ankommendem, ease-in zu Verschwindendem:
														Ein Element, das ins Bild kommt, sollte in seine Position hinein abbremsen; eines, das verworfen wird, darf beschleunigt hinausgehen, weil niemand darauf wartet, es anzusehen.						
    • 
																	
  • 
															Dauer und Kurve werden gemeinsam beurteilt:
														Eine ausgeprägte Kurve über eine lange Dauer wirkt langsam statt charaktervoll. Die meiste Bewegung in Oberflächen liegt zwischen 150 und 300 Millisekunden.						
    • 
									

					

		
			
The curve is not the path



The commonest misreading of an easing curve is that it shows where something moves. It does not. It maps the animation's progress onto time.



Elapsed time runs along the bottom, from nought to one. How far through the change the element is runs up the side, also nought to one. A straight diagonal means the element moves at a constant rate for the whole duration. The bend is what makes movement read as natural, because nothing in the physical world starts and stops instantly.



Steepness is speed. Where the curve rises sharply, the element is moving fast; where it flattens, it has almost stopped. The [msm_tool slug="cubic-bezier-editor"] replays the motion beside the curve, which is the fastest way to connect the two.



Reading a curve at a glance



    
	
  • Steep at the start, flat at the end. The element launches and settles — this is ease-out, and it is what most things arriving on screen should do.
    • 
	
  • Flat at the start, steep at the end. Ease-in: a slow build then a rush. Right for things leaving, wrong for things arriving, because the user waits through the slow part.
    • 
	
  • Flat at both ends. Ease-in-out. Smooth but slightly lifeless for short interface movements; better suited to longer transitions between states.
    • 
	
  • A long flat tail. The commonest fault. The last part of the movement crawls, and the animation feels sluggish however short its total duration.
    • 




Arriving and leaving are different



An element entering the screen should decelerate into place. The user is about to look at it, and it should be still by the time their attention arrives.



An element being dismissed can accelerate away, because nobody is waiting to look at it. That asymmetry — ease-out coming in, ease-in going out — is one of the few motion rules that holds almost everywhere, and it costs nothing to apply.



Overshoot



The vertical axis may go above one, and that is what produces a bounce: the element passes its target and comes back. Push the second control point's vertical value past one to get it.



The horizontal axis cannot leave the nought-to-one range, because time does not run backwards. A curve that tries produces a shape the browser will not accept.



Overshoot is effective and easy to overdo. A small one — a few percent past the target — reads as physical. A large one reads as a toy, and on anything a person uses repeatedly it becomes tiring within a day.



Duration and curve are judged together



A pronounced curve at a long duration reads as slow rather than as characterful. Most interface motion sits between 150 and 300 milliseconds; below about 100 it is not perceived as motion at all, and above roughly 400 people start waiting.



Larger movements need slightly longer than small ones to feel like they travelled rather than teleported. A full-screen panel sliding in can take 300; a button changing colour should not.



The named keywords, and when they are enough



CSS ships with ease, ease-in, ease-out, ease-in-out and linear. Each is a cubic Bézier with fixed control points, and for a great deal of interface work they are entirely sufficient.



ease is the default and is a reasonable general choice. linear is usually wrong for movement — it is the one thing that never happens in the physical world — with one exception: continuous rotation, such as a loading spinner, where any easing produces a visible stutter each time round.



A custom curve earns its place when you want a specific character: a snappy launch, a gentle settle, an overshoot. If you cannot say what you want in those terms, a keyword will do.



Transitions and keyframes use it differently



On a transition, the curve applies across the whole change. On a keyframe animation, it applies between each pair of keyframes rather than across the sequence.



That catches people out: adding an ease to a three-keyframe animation eases three separate times, producing a stutter at each keyframe rather than one smooth arc. If you want a single curve across the whole thing, use two keyframes and let the curve do the shaping.



Respect reduced motion



Whatever curve you choose, wrap the animation in a check for the reader's motion preference. Vestibular disorders make large or repeated movement genuinely unpleasant, and honouring the system setting costs three lines:



@media (prefers-reduced-motion: reduce) { .thing { transition: none; } }



The setting exists because people asked for it. Overriding it because the animation is tasteful is not a judgement call anyone else has delegated to you.

			
			
					

			

				

					Häufig gestellte Fragen				

				

					Speziell zum Cubic-Bezier-Editor. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.				

			


					

											

					
					

						
Es sind die beiden Kontrollpunkte der Kurve als x- und y-Paare. Der erste zieht am Anfang der Animation, der zweite an ihrem Ende.

					

				

											

					
					

						
Setzen Sie den senkrechten Wert des zweiten Kontrollpunktes über eins. Die Zeit kann ihren Bereich nicht verlassen, der Fortschritt schon, und daraus entsteht das Nachfedern.

					

				

											

					
					

						
Sehen Sie sich das Ende der Kurve an. Ein langer flacher Auslauf bedeutet, dass der letzte Teil der Bewegung kriecht, und das wirkt zäh, wie kurz die Gesamtzeit auch ist.

					

				

											

					
					

						
Ease-out für etwas, das ankommt, damit es in seine Position abbremst. Ease-in für etwas, das geht, denn niemand wartet darauf, es anzusehen.

					

				

											

					
					

						
Ja, und beide Formen werden erzeugt. Eine Keyframe-Animation wendet die Kurve zwischen je zwei Keyframes an, nicht über die ganze Abfolge.

					

				

					

				

		
			


			

		

	









	

		

			

				
									
Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.