Draw and visualize easing curves with interactive drag, copy the transition code instantly.
A cubic Bézier curve is defined by four points: P0 (0,0) and P3 (1,1) are fixed and represent the start and end of the animation. P1 and P2 are the control points you drag. The X axis represents time (0 to 100% of the duration). The Y axis represents animation progress. When the curve rises quickly and decelerates (ease-out), it feels physically natural. When it starts slow and accelerates (ease-in), it simulates something gaining momentum. Curves that exceed Y=1 create overshoot, the element goes past its target and springs back, simulating elasticity.
The function is cubic-bezier(x1, y1, x2, y2): those four numbers are the coordinates of two control points, P1 = (x1, y1) and P2 = (x2, y2). The endpoints P0 = (0, 0) and P3 = (1, 1) are fixed and represent the start and end of the animation. The X axis is time, always from 0 to 1 (0% to 100% of the duration), which is why x1 and x2 are necessarily locked to the [0, 1] range.
The Y axis is the progress of the animated property and has no such lock, in this tool y can go from -2 to 2. Y values between 0 and 1 draw normal acceleration and deceleration curves; values above 1 or below 0 make the curve overshoot its target and come back, creating the spring-like feel.
The classic ease-out is cubic-bezier(0, 0, 0.58, 1): the curve rises fast at the start and decelerates at the end, giving the feeling of something arriving and settling, the most common choice for elements entering the screen. Applied, it becomes transition: transform 300ms cubic-bezier(0, 0, 0.58, 1);.
A light spring is cubic-bezier(0.34, 1.56, 0.64, 1): y1 = 1.56 goes past 1, so the animation overshoots the final value and bounces back, imitating elasticity. Compare it with linear cubic-bezier(0, 0, 1, 1), which holds a constant speed and tends to feel mechanical in interfaces.
The same curve works in transition and in animation-timing-function (including per keyframe), so you can reuse an easing across hovers, modal entrances, menus and micro-interactions. As a rule of thumb, use ease-out (or Material standard, cubic-bezier(0.2, 0, 0, 1)) for elements coming in and ease-in for those leaving the screen.
Two cautions: exaggerated overshoot (y well above 1) can feel rubbery and grow tiring on repeated interactions, so use it sparingly; and respect prefers-reduced-motion, reducing or removing motion for people who signal sensitivity to animation. Smooth curves improve the perception of responsiveness without hurting accessibility.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/cubic-bezier-editor"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Cubic Bezier Editor"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
It's a mathematical function that defines how a CSS animation accelerates and decelerates over time. The four parameters (x1, y1, x2, y2) describe the two control points of a cubic Bézier curve, while the start (0,0) and end (1,1) are fixed. The shape of the curve between those points is what gives the movement its personality.
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);CSS is generated locally in your browser.