CSS Transitions — Smooth Hover Effects Guide

What are CSS Transitions?

CSS transitions animate a change between one visual state and another over time. They make hover effects, focus states, theme changes, and small UI interactions feel much smoother.

Without transitions, the browser jumps instantly from one style to the next. With transitions, the user sees a controlled motion between those states.

Transition Properties

Practical Examples

.button {
    background-color: #2563eb;
    color: white;
    transform: translateY(0);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.button:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
}

.card {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

Choosing Good Timing

• Use short durations like 150ms to 300ms for most hover interactions.
• Use ease for natural-feeling motion in many UI elements.
• Avoid overly long transitions that make the interface feel slow.
• Transition only the properties that actually need animation.

FAQ