Physics & Math
Easing Function
Canonical Definition
A mathematical formula that alters the rate of an animation over time, producing non-linear effects such as ease-in, ease-out, and bounce.
Detailed Explanation & Context
An easing function specifies the rate of change of a parameter over time. Without an easing function, an animation moves linearly, which feels robotic and artificial to the human eye. Common easing functions include quadratic, cubic, exponential, and back easings.
Mathematical Model / Governing Formula
f(t): [0, 1] → [0, 1]Key Takeaways
- Ease-out: fast start, slow deceleration (optimal for interface entrances).
- Ease-in: slow acceleration, fast exit (optimal for dismissing elements offscreen).
- Ease-in-out: slow start, rapid middle, slow finish (optimal for loops and state toggles).
Implementation Syntax (CSS)
animation-timing-function: ease-out;Related Glossary Terms
Pillar Guides & Tools
Apply Easing Function in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.