🎯 CSS transition Property

The transition property in CSS allows you to create smooth animations when changing CSS property values. Instead of instant changes, elements can gradually change over a defined duration, creating a more natural user experience.

It is widely used in modern web design to improve interactivity, especially for hover effects, UI animations, and state changes.

The transition property is composed of four main components that control animation behavior.

• Defines which property will animate
• Controls animation duration
• Sets speed curve behavior
• Optional delay before animation starts

Defines which CSS property will be animated.

.box {
    transition-property: background-color;
}
                

You can also use all to animate every changed property.

Specifies how long the animation takes to complete.

.box {
    transition-duration: 0.3s;
}
                

You can use seconds (s) or milliseconds (ms).

Controls how the speed of the animation changes over time.

.box {
    transition-timing-function: ease;
}
                

Common values include: ease, linear, ease-in, ease-out, ease-in-out.

Sets a waiting time before the transition starts.

.box {
    transition-delay: 0.2s;
}
                

transition: all 0s ease 0s;
                

This means all properties change instantly without animation unless duration is defined.

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: red;
}
                

When the user hovers over the button, the background color changes smoothly instead of instantly.

The transition property improves user experience by making UI changes smooth and visually appealing.

• Create smooth hover effects
• Improve UI/UX experience
• Make animations more natural
• Enhance modern web design quality
• Reduce abrupt visual changes