CSS transition Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The transition CSS property enables smooth interpolation between two states of an element by animating changes to other CSS properties over time. Rather than an immediate jump from one value to another, transitions interpolate intermediate values so changes appear gradual and natural. Transitions are typically used to animate state changes caused by user interaction (for example when a class is toggled or a pseudo-class like :hover is applied), and they only run when a property with an animatable value actually changes.

Under the hood a transition watches for changes to one or more animatable properties and then interpolates those properties from their current values to the new values using timing characteristics you define. Not all CSS properties are suitable for transitions — some are animatable on the compositor thread (cheap to animate) while others force layout and paint work (expensive). For smooth, high-performance transitions prefer properties handled on the compositor such as transform and opacity; animating properties that change layout (for example width/height or certain box-model properties) can cause jank because the browser must recalc layout and repaint.

Transitions are great for simple, state-driven motion: telling the browser to ease a color change, move or scale an element slightly, or fade content in and out in response to a direct change. For more complex or keyframed sequences, or when you need repeated/looped motion and more control over steps and callbacks, consider using CSS animation instead. Also keep in mind practical considerations such as interruption (a new change can cancel or queue a running transition), composing with other effects, and using transition-related events to coordinate logic after a transition finishes.

Definition

Initial value: see individual properties
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.transition

Interactive Demo

transition: margin-right 1s;

transition: margin-right 2s .5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out .5s;

transition: margin-right 2s, color 0s 3s, background-color 0s 2s;

transition: all 1s ease-out;

Hover over me
to see transition.

Syntax

transition: <single-transition> [ ',' <single-transition> ]*

Values

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<transition-property>See transition-property CSS property for values.
<transition-duration>See transition-duration CSS property for values.
<transition-timing-function>See transition-timing-function CSS property for values.
<transition-delay>See transition-delay CSS property for values.

Example

HTML

<body>

  <div class="container">

    <h1>CSS Transition Example</h1>

    <div class="card" tabindex="0">

      <div class="card__content">Hover me</div>

    </div>

  </div>

</body>

CSS

/* Layout */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
}

h1 {
  margin-bottom: 20px;
  color: #333;
  font-weight: 600;
}

/* Card with transitions */
.card {
  width: 220px;
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;

  /* Transition shorthand: properties, duration, timing-function */
  transition: transform 320ms cubic-bezier(.2,.9,.2,1),
              box-shadow 320ms ease,
              filter 320ms ease;
}

.card:hover,
.card:focus {
  /* Transformed state */
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  filter: brightness(1.06);
}

.card__content {
  font-size: 18px;
  font-weight: 700;
  pointer-events: none; /* keep hover on the card */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS transition property. Hover over a browser icon to see the version that first introduced support for this CSS property.