Transition-property Property
Last updated: 2026-09-13
transition-property Transition-property Property
The transition-property property specifies which CSS properties apply a transition effect when their values change. Its default value is all, meaning every animatable property takes part in the transition; you can also list specific property names explicitly to avoid unnecessary performance cost and unexpected animation behavior.
| Category | |
|---|---|
| Initial Value | all |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
transition-property: none | all | <property>#;⚙️ Values
| Value | Type | Description |
|---|---|---|
all | none | Keyword | All properties or none |
<property> | Type | The property to transition |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition-property | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| Supported in all major browsers | |||||
Warning： Using all is convenient, but any change to any animatable property will trigger a transition, which can cause unexpected effects — even font-size changes get animated. It is recommended to list the properties you actually need.
❓ FAQ
QWhich CSS properties can transition-property target for animation?
AOnly interpolable properties can be transitioned — those with intermediate numeric states, such as color, opacity, transform, box-shadow, filter, width, and height. Discrete properties like display, visibility, and font-family cannot be smoothed and will simply jump between states.
QWhat is the point of setting the transition-property to none?
Anone means no property takes part in any transition, which is equivalent to disabling transitions on the element. It is commonly used to temporarily turn off transitions — for example, preventing elements from flying in from their initial position on first page load. It can also reset transition settings inherited from a parent or a global stylesheet.
QWhat are the pitfalls of transition-property: all? Why is all not recommended?
Aall animates every animatable property whenever it changes, which creates two problems: a performance cost, because changes to incidental properties such as font-size or line-height also get animated; and hard-to-control behavior, producing animations that feel unmanaged. Listing the properties explicitly is cheaper and easier to maintain — all only suits tiny components with very few animatable properties.
QWhy can't the height: auto value be transitioned or animated?
Aheight: auto has no definite intermediate value, so the browser cannot interpolate between height: 0 and auto, and the animation jumps abruptly. Common workarounds: the max-height trick, transitioning grid-template-rows from 0fr to 1fr to reveal content, or using scaleY() with transform-origin for a visual expand.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
