transition
The transition shorthand sets all transition properties.
Formal Syntax
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| transition | 26 | 16 | 9 | 12 |
| all | 1 | 4 | 3.1 | 12 |
| allow-discrete | 37 | 4 | 10 | 12 |
| ease | 1 | 4 | 3.1 | 12 |
| ease-in | 1 | 4 | 3.1 | 12 |
| ease-in-out | 1 | 4 | 3.1 | 12 |
| ease-out | 1 | 4 | 3.1 | 12 |
| gradients_can_animate | — | — | preview | 12 |
| linear | 1 | 4 | 3.1 | 12 |
| none | 1 | 4 | 3.1 | 12 |
| normal | 37 | 4 | 10 | 12 |
| step-end | 1 | 4 | 3.1 | 12 |
| step-start | 1 | 4 | 3.1 | 12 |
| transition-behavior | 117 | 129 | 17.4 | 117 |
Related Properties
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range
- animation-range-end
- animation-range-start
- animation-timeline
- animation-timing-function
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- timeline-scope
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- view-timeline
- view-timeline-axis
- view-timeline-inset
- view-timeline-name
- view-transition-class
- view-transition-name
- view-transition-group 🧪
- animation-range-center 🚧
- animation-trigger 🚧
- timeline-trigger 🚧
- timeline-trigger-exit-range 🚧
- timeline-trigger-exit-range-end 🚧
- timeline-trigger-exit-range-start 🚧
- timeline-trigger-name 🚧
- timeline-trigger-range 🚧
- timeline-trigger-range-end 🚧
- timeline-trigger-range-start 🚧
- timeline-trigger-source 🚧