Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

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.

Syntax and cascadeLayout

Overview

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
css.properties.content-visibility.is_transitionable
117
117
18
117
18
CSS property
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
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.modal {
  transition: opacity 0.3s, display 0.3s allow-discrete;
  opacity: 0;
  display: none;
}
.modal.open {
  opacity: 1;
  display: block;
}

Live demo

Displaystate

CSS Displaystate demo.

PreviewFullscreen

hiddenstate

CSS hiddenstate demo.

PreviewFullscreen

fade in

CSS fade in demo.

PreviewFullscreen

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.

Related links

Powered by web-features