CSS Transitions

CSS transitions create smooth changes between property values. They are commonly used for hover effects, focus states, buttons, cards, navigation links, menus, forms, overlays, and modern interactive UI components.

What Are CSS Transitions?

A CSS transition lets an element change from one style to another smoothly over time. Instead of instantly changing color, size, opacity, transform, or shadow, the browser animates the change.

.button {
  background-color: #0d6efd;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #0b5ed7;
}

In this example, the button background color changes smoothly when the user hovers over it.

Why CSS Transitions Are Important

Make UI interactions feel smoother and more polished.
Improve feedback for buttons, links, cards, and forms.
Create hover and focus effects without JavaScript.
Help users understand state changes visually.
Improve perceived quality of websites and applications.
Support reusable design system interaction patterns.
Can improve usability when used carefully and accessibly.

CSS Transitions Cheatsheet

The following table explains the most important CSS transition properties.

Property	Example	Purpose
`transition-property`	`transition-property: opacity;`	Defines which CSS property should transition.
`transition-duration`	`transition-duration: 0.3s;`	Defines how long the transition takes.
`transition-timing-function`	`transition-timing-function: ease;`	Controls the speed curve of the transition.
`transition-delay`	`transition-delay: 0.1s;`	Waits before starting the transition.
`transition`	`transition: opacity 0.3s ease;`	Shorthand for transition properties.
`all`	`transition: all 0.3s ease;`	Transitions all animatable changed properties.
`ease`	`transition-timing-function: ease;`	Starts slow, speeds up, then slows down.
`linear`	`transition-timing-function: linear;`	Uses constant speed.
`ease-in`	`transition-timing-function: ease-in;`	Starts slowly and speeds up.
`ease-out`	`transition-timing-function: ease-out;`	Starts quickly and slows down.
`cubic-bezier()`	`cubic-bezier(0.4, 0, 0.2, 1)`	Creates a custom timing curve.

CSS Transition Syntax

The transition shorthand commonly includes the property, duration, timing function, and optional delay.

selector {
  transition: property duration timing-function delay;
}

Example:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

transition-property

The transition-property property defines which CSS property should animate.

.box {
  transition-property: opacity;
  transition-duration: 0.3s;
}

.box:hover {
  opacity: 0.7;
}

Common transition properties include opacity, transform, color, background-color, box-shadow, and border-color.

transition-duration

The transition-duration property defines how long the transition lasts.

.button {
  transition-property: background-color;
  transition-duration: 200ms;
}

Short durations like 150ms to 300ms are common for UI interactions.

transition-timing-function

The transition-timing-function controls the acceleration curve.

.panel {
  transition: transform 0.3s ease-in-out;
}

Timing Function	Behavior
`ease`	Default smooth start and end.
`linear`	Same speed from start to finish.
`ease-in`	Starts slow and speeds up.
`ease-out`	Starts fast and slows down.
`ease-in-out`	Starts slow, speeds up, then slows down.
`cubic-bezier()`	Custom motion curve.

transition-delay

The transition-delay property delays the start of a transition.

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease 0.15s;
}

.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

Delays can be useful for tooltips, menus, and staged UI effects.

transition Shorthand

The transition shorthand is the most common way to write transitions.

.button {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #0b5ed7;
  transform: translateY(-2px);
}

You can transition multiple properties by separating each transition with a comma.

Hover Transition Example

Hover transitions make cards and buttons feel interactive.

.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

Pair hover effects with focus styles so keyboard users receive similar feedback.

Button Transition Example

Buttons commonly transition background color, border color, transform, or shadow.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1rem;
  background-color: #0d6efd;
  color: #ffffff;
  border: 1px solid #0d6efd;
  border-radius: 0.5rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.button:hover,
.button:focus-visible {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}

.button:active {
  transform: translateY(1px);
}

Opacity Transition Example

Opacity transitions are useful for fades, overlays, tooltips, menus, and modals.

.overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.overlay.is-visible {
  opacity: 1;
}

Transform Transition Example

Transform transitions are usually smoother than layout-based transitions.

.menu-panel {
  transform: translateY(-0.5rem);
  opacity: 0;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.menu-panel.is-open {
  transform: translateY(0);
  opacity: 1;
}

Use transform for movement and scale effects when possible.

CSS Transition Performance

Some properties are cheaper to animate than others. Smooth transitions usually use transform and opacity.

Better for Performance	Use Carefully
`transform`	`width`
`opacity`	`height`
`filter` in small amounts	`top`, `left`, `margin`
`box-shadow` in small amounts	Large layout-changing animations

Reduced Motion for CSS Transitions

Some users prefer reduced motion. Use prefers-reduced-motion to respect that setting.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

This improves accessibility for users who are sensitive to motion effects.

CSS Transitions and Accessibility

Do not rely only on motion to communicate important state changes.
Respect prefers-reduced-motion.
Pair hover effects with :focus-visible styles.
Keep transitions short and predictable.
Avoid flashing or distracting effects.
Ensure focus outlines remain visible.
Make interactive states clear with color, contrast, shape, or text where needed.

CSS Transitions and SEO

CSS transitions do not directly improve rankings, but they can improve user experience, engagement, perceived quality, accessibility, and interaction clarity.

Smoother interactions can make UI feel more professional.
Clear hover and focus states improve navigation usability.
Accessible transitions support a wider audience.
Performance-friendly transitions help keep pages responsive.
Better UX can improve trust and content engagement.

Common CSS Transition Mistakes

Using transition: all everywhere.
Animating layout-heavy properties like width, height, top, and left unnecessarily.
Making transitions too slow.
Forgetting keyboard focus states.
Using hover-only effects on touch interfaces.
Ignoring reduced motion preferences.
Adding too many transitions to a page and hurting performance.
Using motion to communicate important information without text or visual fallback.

CSS Transition Best Practices

Transition specific properties instead of using all.
Use transform and opacity for smoother motion.
Keep UI transitions short, usually around 150ms to 300ms.
Use consistent timing functions across your design system.
Pair hover transitions with focus-visible styles.
Respect prefers-reduced-motion.
Use transitions to support usability, not distract from content.
Test transitions on mobile, desktop, keyboard navigation, and low-performance devices.

Key Takeaways

CSS transitions create smooth changes between property values.
The main properties are transition-property, transition-duration, transition-timing-function, and transition-delay.
The transition shorthand is the most common syntax.
Use transitions for hover, focus, active, menu, overlay, and card effects.
transform and opacity are usually better for performance.
Accessible transitions should support keyboard users and reduced motion preferences.

Pro Tip

For most UI effects, use transition: transform 0.2s ease, opacity 0.2s ease;. Avoid transition: all in production because it can animate unexpected properties.