CSS Transitions

What are CSS Transitions?

CSS Transitions allow you to smoothly change CSS property values over a given duration instead of changing them instantly.

• Add smooth hover effects
• Improve user experience
• Make UI interactions natural
• No JavaScript required

How CSS Transitions Work

A transition happens when:

• A CSS property changes (e.g., hover)
• A transition is defined
• The browser animates the change smoothly

CSS Transition Properties

• transition-property – Which property to animate
• transition-duration – How long it takes
• transition-timing-function – Speed curve
• transition-delay – Delay before animation starts

Basic Transition Example

.button {
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    transition: background-color 0.4s ease;
}

.button:hover {
    background-color: #1e40af;
}

                

Multiple Property Transitions

You can animate more than one property at the same time.

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

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

                

Transition Timing Functions

Timing functions control the speed curve of the transition.

• ease (default)
• linear
• ease-in
• ease-out
• ease-in-out

.box {
    transition: transform 0.5s ease-in-out;
}

.box:hover {
    transform: translateY(-10px);
}

                

Transition Delay

transition-delay delays the start of the transition.

.menu-item {
    transition: color 0.3s ease;
    transition-delay: 0.2s;
}

.menu-item:hover {
    color: #2563eb;
}

                

Transition Shorthand

You can write all transition properties in one line.

.element {
    transition: all 0.4s ease-in-out;
}

                

Common Uses of CSS Transitions

• Button hover effects
• Card animations
• Dropdown menus
• Image zoom effects

Best Practices for CSS Transitions

• Use transitions sparingly
• Prefer transform and opacity
• Keep durations short (0.2s – 0.5s)
• Ensure transitions feel natural