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:

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.

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