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. The supporting concepts are explained in Entry & Exit Transitions and CSS Animations.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
transition	26	12	16	9

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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 NextEntry & Exit Transitions