<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()'.
Syntax
/* Usage Example */
.animated-box {
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
/* custom easing function for a unique feel */
}
<easing-function> Browser support
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+