Ease in out back
back.inOut · easeInOutBack
Anticipates or overshoots the target before settling. Accelerates through the first half and decelerates through the second.
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 in out back 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
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.