display animation
You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
is transitionable | 117 | 117 | | 18 | 117 | 18 |
keyframe animatable `@keyframe` animatable | 116 | 116 | | 18 | 116 | 18 |
is transitionable Transitionable when setting `transition-behavior: allow-discrete` | 117 | 117 | | 18 | 117 | 18 |
keyframe animatable `@keyframe` animatable | 116 | 116 | | 18 | 116 | 18 |
transitionable content-visibility Transitions `content-visibility` property when set to `allow-discrete` | 117 | 117 | | 18 | 117 | 18 |
transitionable display Transitions `display` property when set to `allow-discrete` | 117 | 117 | | 18 | 117 | 18 |
Syntax
.modal {
transition: opacity 0.3s, display 0.3s allow-discrete;
opacity: 0;
display: none;
}
.modal.open {
opacity: 1;
display: block;
}Live demo
Use cases
-
Use display animation
Use display animation when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply display animation to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test display animation in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using display animation does not make content harder to perceive, understand, or operate in assistive contexts.