🎯 CSS transition-timing-function Property

The transition-timing-function property defines how the speed of a transition changes over time. It controls whether an animation starts slowly, moves at a constant speed, accelerates, decelerates, or follows a custom motion curve.

By choosing the right timing function, you can create smoother and more natural animations that improve the overall user experience.

While transition-duration controls how long an animation lasts, transition-timing-function controls how the animation progresses during that time.

• Controls animation speed behavior
• Creates realistic motion effects
• Improves user experience
• Supports predefined and custom curves

Starts slowly, speeds up in the middle, and slows down again at the end. This is the default value.

transition-timing-function: ease;
                

Runs at a constant speed from start to finish.

transition-timing-function: linear;
                

Starts slowly and gradually accelerates toward the end.

transition-timing-function: ease-in;
                

Starts quickly and gradually slows down before finishing.

transition-timing-function: ease-out;
                

Starts slowly, speeds up in the middle, and slows down again near the end.

transition-timing-function: ease-in-out;
                

Immediately jumps to the final state at the beginning of the transition.

transition-timing-function: step-start;
                

Waits until the end of the transition duration and then jumps to the final state.

transition-timing-function: step-end;
                

Divides the animation into a specific number of discrete steps.

transition-timing-function: steps(5, end);
                

Useful for sprite animations and frame-by-frame effects.

Creates a custom animation curve using four control points.

transition-timing-function:
cubic-bezier(0.25, 0.1, 0.25, 1);
                

This provides complete control over animation speed and acceleration.

Resets the property to its default value, which is ease.

transition-timing-function: initial;
                

.box {
    transition: transform 0.5s ease-in-out;
}

.box:hover {
    transform: scale(1.2);
}
                

In this example, the element starts scaling slowly, speeds up in the middle, and slows down before reaching its final size.

The transition-timing-function property allows you to create animations that feel natural and professional. Different timing functions can dramatically change how users perceive movement and interaction.

• Create smooth and realistic animations
• Control acceleration and deceleration
• Improve user interaction feedback
• Build advanced animation effects
• Customize motion using cubic-bezier()