CSS — Transitions

From abrupt to smooth

By default, hover states snap instantly. transition interpolates between the two states:

.button {
    background: #0d9488;
    transition: background 0.2s ease;
}
.button:hover {
    background: #0f766e;    /* fades in over 0.2s instead of snapping */
}

What the browser displays

(Hovering gradually darkens the button over 200ms; leaving fades it back.)

Anatomy:

transition: background  0.2s   ease;
            └───┬───┘ └─┬─┘  └┬┘
           property  duration easing

The four longhands

.box {
    transition-property: transform, box-shadow;
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

Comma-separate for multiple properties, or all for everything:

.card {
    transition: all 0.3s ease;
}

all is convenient but can animate expensive things accidentally (width → layout thrash). Prefer naming specific properties.

Timing functions — personality of motion

Value	Feel
ease	Gentle default
linear	Mechanical, constant speed
ease-in	Slow start — leaving
ease-out	Fast start, gentle landing — entering
ease-in-out	Smooth both ends

.menu { transition: transform .25s ease-out; }   /* entrances feel responsive */

Rule of thumb: ease-out for things appearing, ease-in for things disappearing.

The classic card lift

.card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

(Cards rise subtly with a soft shadow on hover — the ubiquitous "clickable card" affordance.)

Transform + opacity are the cheapest properties to animate (GPU-composited). Animating height, top, or margin forces layout recalculation every frame — jank on low-end devices.

Animate these ✅	Avoid animating ❌
transform	width / height
opacity	top / left
filter / box-shadow	margin / padding

Underline grow effect

.nav a {
    text-decoration: none;
    position: relative;
}
.nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.nav a:hover::after { transform: scaleX(1); }

(A thin underline sweeps out from the left on hover.)

Respect reduced motion

Some users get motion-sick from animation. One media query covers them:

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; }
}

Professional polish, two lines.

Mini Practice

1. Give buttons a background-color transition with ease-out
2. Build the card-lift effect; then try animating margin-top instead of transform and compare smoothness
3. Implement the growing underline nav
4. Add a 0.1s delay to a tooltip's entrance only
5. Install the reduced-motion snippet and verify with OS settings toggled

Next: animations →