CSS Animations & Transitions

CSS Transitions

The CSS Transition property allows you to create smooth animations between property changes.

Without transitions, style changes happen instantly. With transitions, changes occur gradually over a specified duration, creating a more polished user experience.

Transitions are commonly used for:

Button hover effects
Menu interactions
Image effects
Card animations
Modern UI components

Syntax

Transition Syntax

css

selector {
    transition: property duration timing-function delay;
}

Transition Example

css

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

Smoothly changes the button's background color over 0.3 seconds.

Attributes

Property	Description	Example
transition	Shorthand property	transition: all 0.3s ease;
transition-property	Specifies which property changes	transition-property: width;
transition-duration	Sets animation time	transition-duration: 1s;
transition-timing-function	Controls animation speed curve	transition-timing-function: ease;
transition-delay	Delays animation start	transition-delay: 0.5s;

Example

CSS Transitions Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions Example</title>
    <style>
        .button {
            background-color: #007acc;
            color: white;
            padding: 12px 24px;
            border: none;
            cursor: pointer;
            transition: background-color 0.4s ease;
        }
        .button:hover {
            background-color: #005999;
        }
    </style>
</head>
<body>
    <button class="button">
        Hover Me
    </button>
</body>
</html>

Output

Browser Output

css

A blue button will appear
When the mouse hovers over the button, the color will gradually change to a darker blue
The change will occur smoothly over 0.4 seconds
When the mouse leaves, the button will smoothly return to its original color

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

Transition Multiple Properties

Multiple Property Transition

css

transition:
    background-color 0.3s ease,
    transform 0.3s ease;

Animates both color and transform changes.

Width Transition

css

.box {
    width: 100px;
    transition: width 0.5s ease;
}
.box:hover {
    width: 200px;
}

Smoothly expands the width.

Timing Functions

Value	Effect
ease	Slow start and end
linear	Constant speed
ease-in	Slow start
ease-out	Slow end
ease-in-out	Slow start and end

Transition All Properties

css

transition: all 0.3s ease;

Applies transitions to all animatable properties.

Common Transition Example

css

.card {
    transition: transform 0.3s ease;
}
.card:hover {
    transform: scale(1.05);
}

Creates a smooth zoom effect.

Conclusion

CSS Transitions provide an easy way to create smooth and professional visual effects when element properties change. By controlling duration, timing, and delays, transitions enhance user experience and make interfaces feel more responsive and interactive.

PreviousCSS 3D Transform NextCSS Animations