Transition Shorthand Property
Last updated: 2026-09-13
transition Transition Shorthand Property
The transition property is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay. It enables smooth, animated changes between property values when an element changes state — for example on :hover or :focus — instead of abrupt jumps. By specifying the target property, duration, easing curve, and delay, you can easily create fluid interaction effects. It is a fundamental tool for building modern web micro-interactions.
| Category | |
|---|---|
| Initial Value | all 0s ease 0s |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
transition: [ none | <single-transition> ]#;
/* <single-transition> = [ <property> | none ] || <time> || <easing-function> || <time> */⚙️ Values
| Value | Type | Description |
|---|---|---|
<single-transition># | Value | Transition shorthand: property, duration, timing function, delay |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| Supported in all major browsers | |||||
Tip： If the timing function is omitted, it defaults to ease; if the delay is omitted, it defaults to 0s. Multiple transitions are comma-separated so different properties can each have their own transition settings.
Warning： Not every property can be transitioned. Only properties with intermediate values — such as color, opacity, and transform — can animate; discrete properties like display cannot be transitioned.
❓ FAQ
QWhat is the difference between the transition and animation CSS properties?
Atransition needs a trigger such as :hover or :focus to play, and it moves between exactly two states: the starting and the ending value. animation works with @keyframes to define any number of keyframes, and can play automatically, loop, run in reverse, and be paused — it is far more powerful. In short: use transition for state changes and animation for complex sequenced motion.
QHow do I apply transitions to only some CSS properties and not others?
AList the properties you want to animate with transition-property, for example transition-property: background, transform;. If you do not specify it, the default is all, so every animatable property takes part in the transition, which can produce unexpected animation and unnecessary performance cost. It is best to declare the properties explicitly.
QWhy is my CSS transition not working and how can I fix the problem?
AFour common causes: the target property itself is not animatable (such as display or font-family); the starting or ending value is missing, so the browser has nothing to interpolate between; the transition is declared inside the pseudo-class where the state changes instead of on the element itself; or the shorthand order is wrong — duration must come before delay.
QMy transition is janky. Which properties are bad to transition?
ADo not transition properties that trigger reflow and repaint, such as width, height, top, left, margin, and font-size. Instead, prefer transform and opacity, which run on the compositor thread and are handled by the GPU, staying smooth at 60fps. If needed, add will-change to create a compositor layer in advance.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
