CSS Transition Use Cases: Hover, Focus and Menu Examples

The everyday CSS transition use cases are button and card hovers, animated link underlines, focus-ring feedback, accordion reveals and sliding menus — small touches that make an interface feel alive. Instead of explaining transitions in the abstract, this guide leads with the scenarios you will actually build, each with code you can generate and copy.

Example 1: the button hover lift

The single most common transition. Ease a subtle upward move on hover so the button feels responsive:

.btn { transition: transform 200ms ease-out; }
.btn:hover { transform: translateY(-2px); }

Two hundred milliseconds and an ease-out curve read as crisp without being twitchy.

Example 2: the animated link underline

Grow an underline from left to right on hover using a pseudo-element and a transitioned transform:

.link::after { transform: scaleX(0); transition: transform 250ms ease; }
.link:hover::after { transform: scaleX(1); }

Example 3: focus-ring feedback for accessibility

Keyboard users deserve smooth, visible focus. Transition a box-shadow ring so it eases in on :focus-visible:

.field { transition: box-shadow 150ms ease-in-out; }
.field:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.5); }

Example 4: the accordion or details reveal

For expandable panels, transition max-height or, better, an opacity and transform pair to fade content in as it appears. Opacity-based reveals stay smooth where height animations can stutter.

Example 5: the sliding side menu

Off-canvas navigation slides in with a translated transform and a slightly longer duration:

.drawer { transform: translateX(-100%); transition: transform 300ms ease-in-out; }
.drawer.open { transform: translateX(0); }

Scenario cheat sheet

A repeatable workflow

For each scenario, set the property, dial the duration and curve in the generator, then hover the preview to feel the timing before you commit. Copy the shorthand onto the base rule and put the changed value on the state rule. Everything runs in your browser with no uploads, so it is safe for client projects and works offline.

Try the CSS Transition Generator — free and 100% in your browser.

FAQ

What is the best transition for a primary call-to-action button?

A transform lift or a scale pop over 150–250ms with an ease-out curve is the most reliable. It communicates interactivity without pulling focus from the page content.

How do I animate a dropdown or menu opening?

Transition a transform (translate or scale) together with opacity so the menu slides and fades in at once. Give it a slightly longer duration than a hover — around 250–300ms — since it covers more distance.

Can I stagger a list so items animate one after another?

Yes. Give each item the same transition but an increasing transition-delay. A step of 40–60ms between items creates a pleasant cascade as a list or menu appears.

Why does my accordion jump instead of easing open?

Height and auto values are hard to transition. Animate max-height to a fixed value, or fade the content with opacity and transform, which stays smooth and avoids the jump.

Related free tools

• CSS Transform Generator — build the target value for slide and lift effects.
• CSS Animation Generator — for looping or multi-step motion.
• CSS Button Generator — style the buttons in these examples.
• CSS Loader Generator — animated loading indicators.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software. When these interactions are part of a larger product, explore how ByteVancer can design and build it end to end.