A CSS transition animates a style change between two defined states. Unlike a keyframe animation, it needs no steps: the browser animates the change when a state such as hover or focus begins or ends. The transition declaration names the property to animate, how long the change takes, and its timing function. section 11.6 section 11.6.1
Reveal a summary card
A card can show its title at first, then reveal its description and link on hover or focus within the card. Its container changes position and height; the hidden content changes opacity and position. Applying `transition: all 700ms ease-in-out` to both makes those changes run over 700 milliseconds, starting slowly, speeding up, then slowing again. On narrow screens or devices without hover, show the information without requiring this interaction. section 5.5 section 5.0
Choose a transition to fit the interaction:
- For a share link that grows on hover or focus, `transition: transform ease-in-out 250ms` animates its scale from the default `scale(1)` to `scale(1.25)` and back. The short duration keeps the response noticeable without feeling laggy. section 11.6.1
- For a credit-card flip, `transition: transform 350ms cubic-bezier(0.71, 0.03, 0.56, 0.85)` animates rotation. Its media query limits the motion-heavy effect to users without a reduced-motion preference. section 9.5.3
Not every style change can happen gradually. A share menu can transition its width from closed to open, but `overflow` has no in-between state: changing it too early exposes icons before the menu finishes opening. JavaScript listens for `transitionstart` and `transitionend`, hiding overflow as closing starts and making it visible after opening ends. section 11.6.3
Listing 5.17 Showing content on hover and focus-within
@media (hover: hover) and (min-width: 700px) and
(prefers-reduced-motion: no-preference) {
main > section > div {
transform: translateY(calc(350px - 8rem));
height: 5rem;
overflow: hidden;
transition: all 700ms ease-in-out; #1
}
div > *:not(h2) {
opacity: 0;
transform: translateY(1rem);
transition: all 700ms ease-in-out; #1
}
section:hover div, #2
section:focus-within div { #3
transform: translateY(0);
height: calc(350px - 4rem);
}
section:hover div > *:not(h2), #4
section:focus-within div > *:not(h2){ #5
opacity: 1;
transform: translateY(0);
}
}
The listing puts transitions on the card container and its contents, then defines their hover and focus-within end states. section 5.5
