CSS transition-timing-function Property

The CSS transition-timing-function property specifies the speed pattern of a transition effect, controlling how the animation progresses from start to end.

• Controls the speed of a transition.
• Supports values like ease, linear, ease-in, ease-out, and ease-in-out.
• Allows custom timing curves using cubic-bezier().

Syntax:

transition-timing-function:
 ease | linear | ease-in | ease-out | ease-in-out |
 cubic-bezier(p1, p2, p3, p4) |
 steps(n, <jumpterm>) |
 step-start | step-end | initial;

Property Values of CSS transition-timing-function

• linear: The transition progresses at a constant speed.
• ease-in: The transition starts slowly and speeds up.
• ease-out: The transition starts quickly and slows down at the end.
• initial: Sets the property to its default value, ease.

Example of CSS transition-timing-function Property

Example: Demonstrates the transition-timing-function property using linear, ease, ease-in, and ease-out, showing different transition speeds as each element expands on hover.

Output:

👁 Image