transition-property
Quick Summary for transition-property
The transition-property CSS property sets the CSS properties to which a transition effect should be applied.
Code Usage for transition-property
/* Keyword values */ transition-property: none; transition-property: all;  /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically;  /* Multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding;  /* Global values */ transition-property: inherit; transition-property: initial; transition-property: revert; transition-property: unset; 
More Details for transition-property

transition-property

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.

Note: The set of properties that can be animated is subject to change. As such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results.

If you specify a shorthand property (e.g., background), all of its longhand sub-properties that can be animated will be.

Syntax

/* Keyword values */ transition-property: none; transition-property: all;  /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically;  /* Multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding;  /* Global values */ transition-property: inherit; transition-property: initial; transition-property: revert; transition-property: unset; 

Values

none

No properties will transition.

all

All properties that can transition will.

<custom-ident>

A string identifying the property to which a transition effect should be applied when its value changes.

Formal definition

Initial valueall
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

none | <single-transition-property>#

where <single-transition-property> = all | <custom-ident>

Examples

Simple example

This example performs a four-second font size transition when the user hovers over the element, the transition-property is the font-size.

HTML
<a class="target">Hover over me</a> 
CSS
.target {   font-size: 14px;   transition-property: font-size;   transition-duration: 4s; }  .target:hover {   font-size: 36px; } 

You will find more examples of transition-property included in the main CSS transitions article.

Specifications

Specification
CSS Transitions Level 2 # transition-property-property

See also

Using CSS transitions transition transition-duration transition-timing-function transition-delay TransitionEvent Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown
Random CSS Property

grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.
grid-auto-rows css reference