CSS Transitions

CSS Transitions: Smooth State Changes Without Keyframes

CSS transitions interpolate property values smoothly over time whenever an element changes state—such as hovering a button, focusing an input, or toggling an .is-open class in JavaScript. Two properties (transition-property and transition-duration) turn abrupt instant snaps into polished interface feedback.

Transition Shorthand and Timing Curves

Use the shorthand transition: property duration timing-function delay;, keeping durations crisp (150ms–250ms) for everyday UI buttons and links:

• ease / ease-out: Starts briskly and decelerates cleanly—ideal for elements entering or buttons responding to clicks.
• ease-in-out: Smooth acceleration and deceleration for toggle switches.
• cubic-bezier(...): Custom acceleration curve for snappy spring-like feel.

.btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    transform: translateY(0);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        transition: none;
    }
}

Which Properties Transition Smoothly

Stick to transitioning opacity, transform, color, background-color, and border-color. Avoid transitioning height: auto, width, or margin, because auto cannot interpolate smoothly in classic CSS and layout transitions trigger sluggish browser repaints.

Common Mistakes to Avoid

• Writing transition: all 0.3s;: all accidentally animates unintended layout tweaks, dark-mode theme switches, or responsive width changes. List exact properties explicitly (background-color, transform).
• Putting transition only on :hover instead of the base selector: Placing transition on .btn:hover makes the hover-in smooth, then snaps abruptly back when the mouse leaves! Always put transition on the base .btn rule.
• Using sluggish 0.8s durations on buttons: Micro-interactions feel broken past 300ms; keep hover transitions snappy between 150ms and 250ms.

Frequently Asked Questions

Can I transition multiple CSS properties with different durations?

Yes. Separate them with commas: transition: opacity 0.15s ease, transform 0.25s ease-out;.

Why doesn't display: none animate with CSS transition?

display is discrete rather than numeric, though modern browsers support @starting-style and transition-behavior: allow-discrete alongside opacity fades.