effects
transition
Shorthand that animates changes to specified CSS properties over a duration. It is the simplest way to add polish to hover, focus, and state changes.
transition: <property> <duration> <timing-function> <delay> [, ...]Common values
| Value | Effect |
|---|---|
| all .2s ease | Animate every animatable property |
| opacity .3s ease-in-out | Fade transition |
| transform .2s cubic-bezier(.4,0,.2,1) | Snappy transform animation |
| none | Disable transitions |
| background-color .15s linear | Quick color swap |
Examples
.btn { transition: background-color .15s ease, transform .15s ease; }Smooth hover feedback
.fade { transition: opacity .3s; opacity: 0; } .fade.show { opacity: 1; }Fade-in via class toggle
.card:hover { transform: translateY(-4px); transition: transform .2s; }Card lift on hover
Gotcha
Not every property is animatable; display and height: auto notably jump instead of tweening.
Related properties
transform
Applies 2D or 3D transformations like translate, rotate, scale, and skew to an element. Transforms are GPU-accelerated and do not affect surrounding layout.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).
box-shadow
Adds one or more shadows around an element's box. Multiple comma-separated shadows layer to create depth, glow, or inset effects.
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
border-radius
Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.