Frontend

Transition

You might say

The button color changes too abruptly. Can it ease into the new color?

Smooth the change between two visual statesA transition animates a CSS property when its value changes, such as color on hover or a panel opening. Use it to clarify cause and effect, keep the duration short, and respect reduced-motion preferences. Not every property animates smoothly or cheaply.

Hover me← it really animates (transition)

Frame by frame: the color eases over instead of snapping

Anatomy

Default→Hovertransition-property: backgroundtransition-duration: .25stransition-timing-function: ease-out

A state change like hover or selection — the starting point of every transition

List the properties that should transition; avoid all when unrelated changes may be animated

How long it takes; test against distance, task, and motion preferences

The speed curve that gives the motion its character

Variants

Color

→

Hover color shifts and selected states

Transform

Lift

Lifts and slide-ins via transform — best performance

Opacity

Fade-in entrances and fade-out exits

Typical use cases

Button hover

Write your thoughts…

🖱️

→ transition: background .25s ease

Dropdown opening

New message alerts

Weekly digest email

Dark mode

The knob uses a transform transition; the ghost on the left shows its path

Accordion

Website Redesign

Updated yesterday

Hiking Album

2 hours ago

🖱️

Team Offsite RSVP

3 days ago

Transform and shadow provide the hover feedback, then settle smoothly on exit

Theme change

Log out?

Unsaved drafts are kept automatically.

Modal and mask opacity ease with opacity