CSS transition-property Property
How to use the CSS transition-property longhand property to specify a property name for the transition effect. See property values and try examples.
The transition-property CSS property sets which properties of an element should animate when their values change. It accepts a comma-separated list of property names, or the all keyword to transition every animatable property on the element.
On its own, transition-property does nothing visible — it only names the targets. You also need a transition-duration greater than 0s for the change to be gradual rather than instant. In most code you set all four pieces at once with the transition shorthand; transition-property is the longhand you reach for when you want to control each property's timing separately.
transition-property is one of the CSS3 properties.
What can and can't be transitioned
A property is animatable only when CSS knows how to compute the in-between values from a start value to an end value. As a rule of thumb:
- Transitionable: anything with a numeric or color value —
width,height,opacity,color,background-color,transform,left/top,font-size,letter-spacing,box-shadow, and so on. - Not transitionable: discrete keyword values that have no meaningful midpoint —
display,position,float,font-family. Changing these snaps instantly even if you list them intransition-property.
Not all properties in CSS can be transitioned. Listing a non-animatable property (like display) has no effect — the change just happens immediately.
Vendor prefixes (e.g., -webkit-, -moz-, -o-) are no longer required for CSS transitions in modern browsers.
| Initial Value | all |
|---|---|
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No (controls which properties are animated, but is not animated itself). |
| Version | CSS3 |
| DOM Syntax | object.style.transitionProperty = "height"; |
Note: In modern CSS, it is recommended to use the transition shorthand property instead.
Syntax
CSS transition-property values
transition-property: none | all | property | initial | inherit;Example of the transition-property property:
CSS transition-property code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: height;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Here only height animates. Because width isn't listed, it would jump instantly if it changed — which is exactly why naming properties matters.
Example of the transition-property property with transitioned width and height:
CSS transition-property another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: width, height;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>The two property names are separated by a comma. You could also write transition-property: all to animate both at once, but listing them explicitly avoids accidentally animating properties you didn't intend to.
Example of the transition-property property with a transitioned background color:
Example of transition-property with transitioned background color:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #666666;
transition-duration: 1s;
transition-property: background-color;
}
div:hover {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Example of the transition-property property with transitioned background color and left position offset transition:
Example of transition-property with transitioned background color and left position offset transition
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
cursor: pointer;
background-color: #8ebf42;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
}
.element:hover {
left: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<p>Hover over the box to see the element's background color and left position offset transition.</p>
<div class="element"></div>
</div>
</body>
</html>Notice how the comma-separated list lines up by position: the first property (background-color) uses the first duration and first timing function, while the second property (left) uses the second of each. This positional pairing lets each property animate with its own transition-duration and transition-timing-function — something the all keyword can't do.
Example of the transition-property property with transitioned font:
Example of CSS transition-property with letter-spacing, font-size and line-height properties
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: inline-block;
font-family: sans-serif;
transition-duration: 0.6s;
letter-spacing: 1px;
font-size: 20px;
line-height: 28px;
color: #777777;
transition-property: letter-spacing, font-size, line-height;
}
span:hover {
color: #0f9881;
letter-spacing: 6px;
font-size: 26px;
line-height: 34px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<span>Hover over the text to see the effect</span>
</body>
</html>Values
| Value | Description |
|---|---|
| none | No transition effect will appear. |
| all | Transition effect will apply on all the properties. |
| property | Specifies a comma separated list of CSS property names for transition effect. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Related properties
transition-property is one of four longhands that make up a transition. You almost always use them together:
transition-duration— how long the animation takes.transition-timing-function— the acceleration curve (ease, linear, cubic-bezier).transition-delay— how long to wait before it starts.transition— the shorthand that sets all four in one declaration.