Tillitsdone
down Scroll to discover
Exploring CSS transition-property Enhance Your Web Design
Discover the power of the CSS transition-property to create smooth animations.

Learn how to use it, available options, and enhance user experience.
thumbnail

Introduction

The transition-property CSS property lets you choose which CSS properties will have transition effects. This is great for creating smooth and engaging animations, making your web designs more dynamic.

Syntax

transition-property: none | all | property | initial | inherit;

Keyword Values

  • none: No properties will have transition effects.
  • all: All properties that can be transitioned will.

Custom Properties

  • <custom-ident>: Specifies a CSS property to transition, like background-color or width.

Multiple Values

You can specify multiple properties by separating them with commas:

transition-property: property1, property2, property3;

Global Values

  • inherit: Inherits the value from its parent element.
  • initial: Sets the property to its default value.
  • revert: Resets the property to its inherited value if it inherits, or to the initial value if not.
  • revert-layer: Resets the property to the value established by the page’s author’s stylesheet.
  • unset: Acts as either inherit or initial, depending on whether the property is inherited or not.

Examples of Syntax

/* Keyword values */
transition-property: none;
transition-property: all;
/* Custom properties */
transition-property: background-color;
transition-property: width, height;
/* Multiple values */
transition-property: background-color, width, height;
transition-property: all, background-color, width;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

Values

none

  • Description: No properties will have transition effects.
  • Use Case: Useful when you want to disable transitions for specific elements.

all

  • Description: All properties that can be transitioned will do so.
  • Use Case: Convenient when you want to apply transitions to multiple properties without listing them individually.

<custom-ident>

  • Description: Specifies a CSS property to transition, like background-color or width.
  • Use Case: Allows you to specify individual properties for more control over transition effects.

Multiple Values

  • Description: You can specify multiple properties by separating them with commas.
  • Use Case: Useful when you want to apply transitions to a specific set of properties.

initial

  • Description: Sets the transition-property to its default value, which is all.
  • Use Case: Helpful when you want to reset the property to its default behavior.

inherit

  • Description: Inherits the value from its parent element.
  • Use Case: Useful when you want an element to inherit the transition properties of its parent.

revert

  • Description: Resets the property to its inherited value if it inherits, or to the initial value if not.
  • Use Case: Useful for maintaining consistency across different stylesheets.

revert-layer

  • Description: Resets the property to the value established by the page’s author’s stylesheet.
  • Use Case: Provides a way to revert to the author’s intended styles while considering user preferences.

unset

  • Description: Acts as either inherit or initial, depending on whether the property is inherited or not.
  • Use Case: Provides flexibility in resetting the property based on its inheritance.

Examples of Values

/* Keyword values */
transition-property: none;
transition-property: all;
/* Custom properties */
transition-property: background-color;
transition-property: width, height;
/* Multiple values */
transition-property: background-color, width, height;
transition-property: all, background-color, width;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

Formal Definition

Initial Value

  • Initial Value: all
    • Description: By default, all animatable properties will have transition effects.

Applies To

  • Applies To: All elements, including ::before and ::after pseudo-elements.
    • Description: The transition-property can be applied to any HTML element and its pseudo-elements.

Inherited

  • Inherited: No
    • Description: The transition-property is not inherited from its parent element. Each element must have its own transition-property specified.

Computed Value

  • Computed Value: As specified
    • Description: The computed value of the transition-property is the same as the specified value.

Animation Type

  • Animation Type: Not animatable
    • Description: The transition-property itself is not animatable. It is used to define which properties will animate, but it does not animate on its own.

Formal Syntax

transition-property: none | all | <custom-ident>;
  • none: No properties will have transition effects.
  • all: All properties that can be transitioned will do so.
  • <custom-ident>: Specifies a CSS property to transition, like background-color or width.

Examples of Formal Syntax

/* Keyword values */
transition-property: none;
transition-property: all;
/* Custom properties */
transition-property: background-color;
transition-property: width, height;
/* Multiple values */
transition-property: background-color, width, height;
transition-property: all, background-color, width;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

Examples

Basic Example

In this example, we will create a button that changes its background color when hovered or focused. The transition-property will be set to background-color, and the transition duration will be set to one second.

HTML

<button class="target">Hover me!</button>

CSS

html {
height: 100vh;
}
button {
font-size: 1.4rem;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.target {
transition-property: background-color;
transition-duration: 1s;
background-color: #ccc;
}
.target:hover,
.target:focus {
background-color: #eee;
}

Example with Multiple Properties

In this example, we will apply transition effects to multiple properties: background-color, width, and height. This will create a more dynamic and visually appealing effect when the button is hovered.

HTML

<button class="target">Hover me!</button>

CSS

html {
height: 100vh;
}
button {
font-size: 1.4rem;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.target {
transition-property: background-color, width, height;
transition-duration: 1s;
background-color: #ccc;
width: 200px;
height: 50px;
}
.target:hover {
background-color: #eee;
width: 250px;
height: 60px;
}

Example Using all

In this example, we will use the all keyword to apply transition effects to all animatable properties. This is a convenient way to animate multiple properties without listing them individually.

HTML

<button class="target">Hover me!</button>

CSS

html {
height: 100vh;
}
button {
font-size: 1.4rem;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.target {
transition-property: all;
transition-duration: 1s;
background-color: #ccc;
width: 200px;
height: 50px;
}
.target:hover {
background-color: #eee;
width: 250px;
height: 60px;
}

Example with initial

In this example, we will use the initial keyword to set the transition-property to its default value, which is all. This means that all animatable properties will transition.

HTML

<button class="target">Hover me!</button>

CSS

html {
height: 100vh;
}
button {
font-size: 1.4rem;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.target {
transition-property: initial;
transition-duration: 1s;
background-color: #ccc;
width: 200px;
height: 50px;
}
.target:hover {
background-color: #eee;
width: 250px;
height: 60px;
}

Example with inherit

In this example, we will use the inherit keyword to make the button inherit the transition-property value from its parent element. If the parent element has a transition-property value of all, the button will inherit that value.

HTML

<div class="parent">
<button class="target">Hover me!</button>
</div>

CSS

html {
height: 100vh;
}
button {
font-size: 1.4rem;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
outline: none;
}
.parent {
transition-property: all;
transition-duration: 1s;
}
.target {
transition-property: inherit;
background-color: #ccc;
width: 200px;
height: 50px;
}
.target:hover {
background-color: #eee;
width: 250px;
height: 60px;
}

Example with Browser Compatibility

.target {
transition-property: background-color;
transition-duration: 1s;
background-color: #ccc;
}
.target:hover,
.target:focus {
background-color: #eee;
}

This example should work consistently across all major browsers that support the transition-property.

Specifications

The transition-property is defined in the CSS Transitions specification. This specification outlines how to use transitions to create smooth animations.

CSS Transitions Specification

  • Specification Name: CSS Transitions
  • Section: transition-property
  • Description: The CSS Transitions specification describes how to use the transition-property to animate changes to CSS properties smoothly.

For more details, refer to the official documentation:

Browser Compatibility

The transition-property is widely supported across modern browsers. Here’s a summary of browser compatibility:

Key Browsers and Versions

  • Google Chrome: Supported since version 26.0 (March 2013).
  • Microsoft Edge: Supported since version 12.0.
  • Mozilla Firefox: Supported since version 16.0 (October 2012).
  • Opera: Supported since version 12.1 (November 2012).
  • Safari: Supported since version 9.0.

Notes on Compatibility

  • Google Chrome: Fully supported since version 26.0.
  • Microsoft Edge: Supported since version 12.0.
  • Mozilla Firefox: Supported since version 16.0.
  • Opera: Supported since version 12.1.
  • Safari: Supported since version 9.0.

Ensuring Compatibility

To ensure your transitions work across different browsers, test your web designs across various platforms and versions.

Additional Resources

See Also

To learn more about CSS transitions, check out these resources:

Related CSS Properties

Related JavaScript Event

Additional Resources

Related HTML and CSS Reference Guides

Exploring these resources will help you gain a deeper understanding of CSS transitions and how to use them effectively in your web development projects.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.