CSS Transitions

CSS transitions allow you to create smooth changes between two visual states of an element.

---

What is a CSS Transition?

A CSS transition controls how a CSS property changes from one value to another over a specific amount of time.

Without a transition, a change such as a background color or transform usually happens immediately. With a transition, the change happens smoothly.

Interactive Transition Example

Hover over the image to see a smooth transition effect. The image changes its size and position gradually instead of changing instantly.

Transition Syntax

selector {
    transition: property duration timing-function;
}

How CSS Transitions Work

Basic Transition Example

.button {
    background-color: #2563eb;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #7c3aed;
}

Output

1. transition-property

The transition-property property specifies which CSS property should have a transition.

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

2. transition-duration

The transition-duration property specifies how long the transition takes.

.box {
    transition-duration: 0.5s;
}

3. transition-timing-function

The transition-timing-function controls the speed pattern of the transition.

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

Common Timing Functions

4. transition-delay

The transition-delay property specifies how long the browser should wait before starting the transition.

.box {
    transition: background-color 0.5s ease;
    transition-delay: 0.2s;
}

5. Transitioning Multiple Properties

Multiple CSS properties can be transitioned at the same time.

.card {
    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.card:hover {
    background-color: #f8f9fa;
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

Output

Transition Shorthand

Instead of writing each transition property separately, you can use the shorthand transition property.

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

Transition with Transform

Transitions work especially well with transforms such as scale(), rotate(), and translate().

.image {
    transition: transform 0.4s ease;
}

.image:hover {
    transform: scale(1.08);
}

Output

Without Transition vs With Transition

Common Uses of CSS Transitions

Best Practices

• Keep transitions short and smooth for interactive elements.
• Use transitions only where they improve the user experience.
• Prefer transform and opacity for many visual effects.
• Avoid excessive animation that makes the interface difficult to use.
• Test hover-based effects on devices where hover is not available.