CSS Transitions

Written by Swapnil RajaUpdated 30 Jul 2026

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;
}

PreviousCSS 3D Transform NextEntry & Exit Transitions

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

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;

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>

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

CSS Transitions

Syntax

Attributes

Example

Browser Support

Notes

Transition Multiple Properties

Width Transition

Timing Functions

Transition All Properties

Common Transition Example

Conclusion