transition-property
Quick Summary for transition-property
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 value | all |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
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
.
<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 transitionstransition
transition-duration
transition-timing-function
transition-delay
TransitionEvent
Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language