CSS Transitions

A transition creates a smooth animation when the value of a CSS property changes, such as color, width, height, opacity, or transform.

Advantages of CSS Transitions

• Create smooth animations.
• Improve user experience.
• Require very little code.
• Do not require JavaScript.
• Increase website interactivity.

Without Transition

Button → Color changes instantly

With Transition

Button → Color changes smoothly

The transition property specifies which CSS property should animate when its value changes.

button{

    background:blue;

    transition:background;

}

button:hover{

    background:red;

}

The transition-duration property specifies how long the transition should take to complete.

.box{

    width:120px;

    background:orange;

    transition-duration:1s;

}

.box:hover{

    width:250px;

}

The transition-timing-function property controls the speed curve of the transition.

.box{

    transition-property:width;

    transition-duration:2s;

    transition-timing-function:ease;

}

The transition-delay property specifies how long to wait before starting a transition.

.box{

    transition-property:background;

    transition-duration:1s;

    transition-delay:2s;

}

.box:hover{

    background:red;

}

Instead of writing multiple transition properties separately, you can use the transition shorthand property to define them in a single line.

button{

    transition:background 0.5s ease;

}

button:hover{

    background:green;

}

CSS Transitions are commonly used with the :hover pseudo-class to create attractive button, image, and card effects.

.button{

    background:#0d6efd;

    color:white;

    transition:0.4s;

}

.button:hover{

    background:#198754;

}

.image{

    transition:transform 0.5s;

}

.image:hover{

    transform:scale(1.1);

}

You can animate multiple CSS properties at the same time using a single transition declaration.

.box{

    width:150px;

    background:steelblue;

    color:white;

    transition:

        width 0.5s,

        background 0.5s,

        border-radius 0.5s;

}

.box:hover{

    width:250px;

    background:tomato;

    border-radius:20px;

}

Example 1: Button Animation

button{

    transition:background 0.4s;

}

button:hover{

    background:green;

}

Example 2: Image Zoom

img{

    transition:transform 0.5s;

}

img:hover{

    transform:scale(1.1);

}

Example 3: Card Shadow

.card{

    transition:box-shadow 0.4s;

}

.card:hover{

    box-shadow:0 10px 20px
    rgba(0,0,0,0.3);

}

.box{

    transition:

    all 0.5s ease;

}

.box:hover{

    transform:rotate(10deg);

}

Following best practices helps you create smooth, professional, and user-friendly transition effects.

• Use transitions only where they improve user experience.
• Keep transition durations between 0.2s and 0.5s for UI elements.
• Animate lightweight properties like opacity and transform whenever possible.
• Avoid excessive animations that distract users.
• Use consistent transition durations throughout the website.
• Combine transitions with :hover effects.
• Test animations on different devices and browsers.
• Use the shorthand transition property to keep code clean.

❌ Incorrect

.box{

    transition:5s;

}

✔ Correct

.box{

    transition:0.3s ease;

}

CSS Transitions are supported by all modern browsers and are widely used in modern web development.

1. What is a CSS Transition?
2. Why are CSS Transitions used?
3. What is the difference between transitions and animations?
4. Which property specifies the animation duration?
5. What does transition-delay do?
6. What is the purpose of transition-timing-function?
7. How do you animate multiple properties?
8. What is the shorthand syntax for transitions?
9. Which pseudo-class is commonly used with transitions?
10. Why are transitions useful for user interfaces?

In this lesson, you learned:

• ✔ Introduction to CSS Transitions.
• ✔ Transition Property.
• ✔ Transition Duration.
• ✔ Transition Timing Function.
• ✔ Transition Delay.
• ✔ Transition Shorthand Property.
• ✔ Hover Effects.
• ✔ Multiple Property Transitions.
• ✔ Practical Transition Examples.
• ✔ Best Practices and Common Mistakes.