<easing-function>

Mathematical functions that control the speed of an animation over time (e.g., starting slow and ending fast). Common ones include 'ease-in', 'ease-out', and the customizable 'cubic-bezier()'.

/* Usage Example */
.animated-box {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  /* custom easing function for a unique feel */
}
Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

4+
4+
3.1+
12+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC