1. css
  2. /properties
  3. /transition-property

transition-property

Overview

As a CSS property, transition-property defines the CSS properties that will have a transition effect when their values change. It works alongside other transition properties, such as transition-duration, transition-timing-function, and transition-delay, to create smooth and customizable animations.

Note: You can use the shorthand transition property to set transition-property along with other transition-related properties in a single declaration."

Examples and Usage

In the following sections, we'll observe two distinct examples that highlight the application of transition-property with various CSS properties.

HTML Structure

<span class="growing-text">Transition-Property</span>

<div class="shapeshifter"></div>

Example 1: Growing Text

In this example, we create a text animation with the transition-property set to animate both the color and font-size properties. Upon hovering over the text, the color will change to #C63131 and the font size will increase to 2.4rem. The transition-duration is set to 1 second for a smooth and gradual transition.

/* Growing Text Example */
.growing-text {
  font-family: 'UI Monospace', monospace;
  font-size: 1.2rem;
  /* Add transition properties */
  transition-property: color, font-size;
  transition-duration: 1s;
}

.growing-text:hover {
  color: #C63131;
  font-size: 2.4rem;
}

Example 2: Shapeshifter

Here, we create a shape animation using the transition-property to animate the background-color and border-radius properties. When hovering over the shape, the background color will change from #000 to #fbbf24 and the border-radius will transition from 0 to 50%, effectively changing the shape from a square to a circle.

/* Shapeshifter Example */
.shapeshifter {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 0;
  /* Add transition properties */
  transition-property: background-color, border-radius;
  transition-duration: 2s;
}

.shapeshifter:hover {
  background-color: #fbbf24;
  border-radius: 50%;
}

Values

transition-property accepts the following values:

ValueDescription
all(Default) Indicates that all properties that can be animated will have a transition effect applied.
noneIndicates that no properties will have a transition effect applied.
<property>A comma-separated list of CSS property names to which the transition effect is applied.

Associated Properties

  • transition
  • transition-duration
  • transition-timing-function
  • transition-delay

Tips and Tricks

  • Animating shorthand properties, such as background, will cause all of its animatable longhand sub-properties to be animated. To animate specific sub-properties, specify them individually in the transition-property value.

  • When specifying multiple properties using comma-separated values, keep in mind that each property is mapped to its corresponding transition properties (transition-timing-function, transition-duration, and transition-delay). If the list includes invalid property names, the remaining properties will still transition as intended.

  • Common use cases for transition-property include animating elements in response to user interactions, such as changing an element's position, size, or background color when hovering over a button or focusing on a form input.

Browser Compatibility

Older versions of Chrome, Safari, and Firefox may require vendor prefixes for this property. Refer to the Useful Resources section below for more specific information.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*Yes*Yes*Yes*Yes*Yes*

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transition-property

W3C: CSS Transitions - transition-property