Ease out quad
quad.out · easeOutQuad
A mild deceleration. ramin uses it for opacity so a layer becomes visible before it finishes moving.
Try this curve in the studioLive easing graph
Time runs left to right; progress runs bottom to top. Values outside 0–1 show anticipation and overshoot. Back and elastic use the studio's default overshoot setting of 10%.
Copy ease out quad CSS
This CSS linear() timing function approximates the studio curve with 401 evenly spaced samples. It preserves rebounds and overshoot; it is not a cubic Bézier fit. Use it as an animation or transition timing function in browsers that support CSS linear().
Use it in motion design
Apply this curve to a headline entrance, then edit its duration and distance in the studio.
Try this in the studioMotion recipes
Headline enters from below with overshoot
The default launch-graphic entrance. A long travel on a back.out curve reads as confident, and the small overshoot gives the headline a moment of weight as it lands without turning into a bounce. Use it when the headline is the first thing on screen and has to own the frame.
Headline drops in from above with a bounce
A bounce.out curve hits the resting position and rebounds off it, like something dropped onto a floor. It suits playful product spots and social cut-downs. For premium or corporate work it can feel toy-like; an overshoot is usually the better choice there.
Elastic headline entrance from the right
Elastic easing swings past the target and back several times before it rests. A horizontal entrance hides some of that oscillation in the direction of travel, so it reads as energy rather than wobble. Good for sports, gaming and anything that should feel springy.
Headline slides in from the left on a smooth curve
A cubic.out slide with no overshoot is the quiet option: it decelerates into place and stops. Reach for it in explainer and editorial work, or when the headline sits next to a product shot that should keep the attention.
Headline flies forward out of depth
An entrance along Z rather than across the frame. The headline travels toward the camera, which reads as cinematic and suits trailers and title sequences. Pair it with a shallow depth of field so the type comes into focus as it arrives.
More easing curves
Prefer a spring?
Tune stiffness, damping and mass in the spring animation playground and see the settling time it works out.
Timing in frames?
Turn a frame count into the seconds or milliseconds this curve needs with the frames to seconds and milliseconds calculator.
Stagger it
Time a list or a row of letters entering one after another with the stagger animation calculator, then copy its CSS.