Newly available Useful when transition-behavior improves perceived continuity or state change, but motion should remain optional and purposeful.

transition-behavior

The transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

Animation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transition-behavior
117
117
129
17.4
117
17.4
transition-behavior

`transition-behavior` value
117
117
129
17.4
117
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.popover {
  transition: opacity 0.3s ease,
              display 0.3s ease allow-discrete;
  opacity: 1;
}

.popover:not(:popover-open) {
  opacity: 0;
}

@starting-style {
  .popover:popover-open {
    opacity: 0;
  }
}

Live demo

Allow-discrete concept

transition-behavior Allow-discrete concept demo.

PreviewFullscreen

fade outtransition

transition-behavior fade outtransition demo.

PreviewFullscreen

Normal. transition(comparison)

transition-behavior Normal. transition(comparison) demo.

PreviewFullscreen

Use cases

  • State transitions

    Use transition-behavior to clarify UI changes such as opening, reordering, or page transitions.

  • Polished feedback

    Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

  • Motion features can quickly become distracting if they are applied too broadly.
  • Keep animation rules paired with sensible non-animated fallbacks.

Accessibility

  • Respect reduced-motion preferences and keep essential information available without animation.
  • Motion should support understanding, not become a barrier to interaction.

Related links