Easeinout

EaseInOut is a family of timing functions used in animation to describe how an animated value changes over time. An ease-in-out curve starts slowly, speeds up in the middle, and slows again toward the end, producing smooth transitions that feel natural. In practice, an easeInOut function maps a progress parameter t in [0,1] to an output value in [0,1], with a gentle start and finish and a faster middle.

Common variants include easeInOutQuad, easeInOutCubic, easeInOutQuart, and easeInOut Quint, each using a different polynomial or spline to define the acceleration and deceleration while preserving overall symmetry around the midpoint. These functions are examples of easing equations used widely in animation, providing a simple way to control the pacing of motion.

In web development, easeInOut is also a standard timing function in CSS and many animation libraries. CSS defines a built-in timing function named ease-in-out, which is typically implemented as a cubic-bezier curve such as (0.42, 0, 0.58, 1). Library authors may offer additional easeInOut variants for more granular control over motion. The term can be expressed in different naming styles, including easeInOut or ease-in-out, depending on the platform or library.

Applications include transitions of properties such as position, opacity, and scale in user interfaces and motion graphics. The choice of a particular easeInOut variant affects perceived responsiveness: faster mid-curve movements feel snappier, while longer, gentler curves produce more deliberate, easing motion.