CSS transition Property

The transition property is a shorthand that enables smooth changes between CSS property values over a set period of time.

selector { transition: property duration timing-function delay; }
all Applies the transition effect to every CSS property that is capable of being animated.
none Prevents any transition effects from occurring on the element.
<property> The specific name of a CSS property to be transitioned, such as "opacity" or "width".
<time> A numerical value followed by "s" for seconds or "ms" for milliseconds to set duration or delay.
ease Default timing function that starts slow, speeds up in the middle, and ends slowly.
linear Maintains a consistent speed from the start of the transition to the very end.
ease-in Begins the transition at a slow pace and accelerates as it progresses.
ease-out Begins the transition at a fast pace and decelerates toward the end.
ease-in-out Combines both ease-in and ease-out for a slow start and a slow end.
step-start The transition instantly jumps to the final state at the beginning of the duration.
step-end The transition stays at the initial state until the duration finishes, then jumps to the end.
cubic-bezier(n,n,n,n) Allows for custom speed curves by defining four specific points in a bezier function.

Code Examples

A basic button that smoothly changes its background color over 0.3 seconds when the user hovers over it.

<style>
.simple-btn {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.simple-btn:hover {
  background-color: #2ecc71;
}
</style>
<button class="simple-btn">Hover Me</button>

An advanced example using JavaScript to toggle a class, triggering a multi-property transition with a custom cubic-bezier bounce effect.

<style>
.card {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: sans-serif;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 0.4s;
}
.card.expanded {
  transform: scale(1.2) rotate(10deg);
  background-color: #8e44ad;
}
</style>
<div id="myCard" class="card">Click Me</div>
<script>
const card = document.getElementById("myCard");
card.addEventListener("click", function() {
  this.classList.toggle("expanded");
});
</script>

Pro Tip

You can chain multiple transitions in a single line by using commas. This allows you to set different durations for different properties, like "transition: width 0.5s, background-color 2s". Also, using "cubic-bezier" instead of the standard "ease" keywords can give your UI a unique, high-end feel that stands out from basic templates.

Deep Dive

Think of a transition like a dimmer switch for your lights rather than a standard on/off flip switch. Without it, your CSS changes happen instantly, which can feel jarring to a user. When you apply a transition, the browser calculates all the intermediate steps between the starting state and the ending state. To make it work, you need two different states, usually triggered by a hover effect or a class change. It is built from four parts: the property name, the duration of the effect, the speed curve (timing function), and an optional delay before the movement starts. If you forget to provide a duration, the default is 0, meaning you will see no transition at all.

Best Practices

Specify the exact property you want to transition instead of using "all" to keep your site's performance high, as the browser won't have to watch every single property for changes. Keep your durations between 200ms and 500ms; anything longer usually feels sluggish to the user. Define the transition on the base element rather than the ":hover" state so the effect plays smoothly both when the mouse enters and when it leaves.

Common Pitfalls

Transitions will not work if you try to go from a numerical value like "100px" to "auto", because the browser cannot calculate the math for "auto". You must use specific units like pixels, percentages, or viewport units for both states. Also, remember that not every CSS property is animatable; you cannot transition things like "display" or "font-family".

Accessibility

Rapidly moving or flashing elements can trigger seizures or cause discomfort for users with vestibular disorders. Use the "prefers-reduced-motion" media query to detect if a user has requested less movement in their system settings and disable transitions accordingly. Never rely solely on a color transition to convey meaning; ensure there is text or an icon change for users with color blindness.

Dev Data Table: transition property

default all 0s ease 0s
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2013
js_syntax_1 element.style.transition = "all 0.3s ease";
js_syntax_2 element.style.setProperty("transition", "all 0.3s ease");
js_note You can listen for the "transitionend" event in JavaScript to execute code exactly when the visual change finishes.
browsers { "Chrome": 26, "Edge": 12, "Firefox": 16, "Safari": 6.1, "Opera": 12.1, "Chrome Android": 26, "Safari on iOS": 7, "Samsung Internet": 1, "Opera Mobile": 12.1 }
results render here...