How to add transitions

Updated September 2026 · Beginner-friendly guide

Transition a specific property

Define the property, duration, and timing function on the element's base state so both directions animate.

.button {
  background-color: #075985;
  transition: background-color 180ms ease;
}
.button:hover { background-color: #0c4a6e; }

Choose efficient properties

Transforms and opacity usually animate smoothly without reflow. Avoid transition: all, which can animate unintended future changes.

.card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card:hover { transform: translateY(-0.2rem); }

Keep motion purposeful

Use short durations for direct feedback
Do not delay essential controls
Avoid large or continuous movement
Ensure the final state communicates without animation

Respect reduced motion

Remove nonessential transitions for people who request less motion.

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