CSS Transitions

Introduction

A CSS transition animates the change between two CSS states. Instead of jumping instantly from one value to another, the browser draws the in-between frames for you.

Transitions are useful for hover states, focus states, menus, accordions, alerts, form feedback, and small interface changes.

What Makes a Transition Happen

A transition needs a starting value, a changed value, and a transition rule that tells the browser how to animate between them.

• The element starts with one CSS value, such as opacity: 0.
• The value changes because of :hover, :focus-visible, .is-open, .is-visible, or another state.
• The property can be transitioned.
• transition defines the property, duration, timing function, and optional delay.

The Transition Properties

Transitions rely on four main properties. You can write them separately or combine them with the transition shorthand.

Transition Shorthand

The shorthand pattern is transition: property duration timing-function delay. The delay is optional.

List the specific properties you want to animate. Avoid transition: all because it can animate unexpected properties and make debugging harder.

.button {
  transition: background-color 180ms ease, transform 180ms ease;
}

Individual Properties

Writing each transition property separately can be helpful when you are learning or when the timing needs to be very explicit.

.fade {
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

Good Properties to Transition

Some properties are smoother and safer to transition than others. As a general rule, prefer properties that do not force the browser to recalculate layout.

State Changes That Trigger Transitions

Button Hover Transition

Hover transitions should be quick and focused. The goal is feedback, not a big animation moment.

.button {
  background-color: #2f9e44;
  transform: translateY(0);
  transition: background-color 180ms ease, transform 180ms ease;
}

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

Focus-visible Transition

focus-visible helps keyboard users see where they are on the page. Do not remove focus styles without replacing them with a clear custom style.

.button {
  outline: 2px solid transparent;
  outline-offset: 0.25rem;
  transition: outline-color 160ms ease, box-shadow 160ms ease;
}

.button:focus-visible {
  outline-color: currentColor;
  box-shadow: 0 0 0 0.25rem rgb(47 158 68 / 25%);
}

Fade In and Out

opacity transitions are useful for showing and hiding interface elements without an abrupt visual jump.

Remember that an element with opacity: 0 can still take up space and may still be interactive unless you manage visibility or pointer events.

.message {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.message.is-visible {
  opacity: 1;
  visibility: visible;
}

Menu Open and Close

Menus often combine opacity and transform so the menu can fade and slide without animating layout properties.

.menu {
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 200ms ease, transform 200ms ease;
}

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

Accordion Effects

height: auto does not transition cleanly because the browser cannot animate to an unknown automatic value.

One workaround is transitioning grid-template-rows between 0fr and 1fr while the inner content has overflow: hidden.

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.accordion-panel.is-open {
  grid-template-rows: 1fr;
}

.accordion-content {
  overflow: hidden;
}

Transitions with JavaScript

JavaScript can trigger CSS transitions by adding or removing classes. This keeps the animation details in CSS and the interaction logic in JavaScript.

<button class="menu-toggle">Menu</button>
<nav class="menu">...</nav>

const button = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');

button.addEventListener('click', () => {
  menu.classList.toggle('is-open');
});

Timing Functions

transition-timing-function controls the feel of the transition. Start with built-in values before reaching for custom curves.

Custom Timing Functions

cubic-bezier() gives you custom control over the speed curve, but it can be hard to read at first. Use it only when a built-in timing function does not feel right.

.card {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

Accessibility and Performance

Respect user motion preferences with @media (prefers-reduced-motion: reduce). This is especially important for movement, scaling, sliding, and zooming effects.

Transitions should support the interface. If a transition makes the interface feel slower or harder to use, shorten it or remove it.

@media (prefers-reduced-motion: reduce) {
  .button,
  .menu,
  .accordion-panel {
    transition: none;
  }
}

Common Mistakes