transition-behavior

allow-discrete

Transitions will be started on the element for discrete animated properties.

normal

Transitions will not be started on the element for discrete animated properties.

The transition-behavior property is only relevant when used in conjunction with other transition properties, notably transition-property and transition-duration, as no transition occurs if no properties are animated over a non-zero duration of time.

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

The transition-behavior value can be included as part of a shorthand transition declaration. When included in the shorthand, when using or defaulting to all properties, the allow-discrete value has no impact on regular animatable properties. The following CSS is equivalent to the longhand declarations above:

.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

In the above snippet we include the transition property twice. The first instance does not include the allow-discrete value — this provides cross-browser support, ensuring the card's other properties still transition in browsers that don't support transition-behavior.

Discrete-animated properties generally flip between two values 50% through animating between the two.

There is an exception, however, which is when animating to or from display: none or content-visibility: hidden. In this case, the browser will flip between the two values so that the transitioned content is shown for the entire animation duration.

So for example:

• When animating display from none to block (or another visible display value), the value will flip to block at 0% of the animation duration so it is visible throughout.
• When animating display from block (or another visible display value) to none, the value will flip to none at 100% of the animation duration so it is visible throughout.

transition-behavior = 
  <transition-behavior-value>#  

<transition-behavior-value> = 
  normal          |
  allow-discrete  

In this example, a popover is animated as it transitions from hidden to shown and back again.

HTML

The HTML contains a <div> element declared as a popover using the popover attribute, and a <button> element designated as the popover's display control using its popovertarget attribute.

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

html {
  font-family: Arial, Helvetica, sans-serif;
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* Using the shorthand transition property, we could write:
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    or even:
    transition: all 0.7s allow-discrete;
  */
}

/* Needs to be included after the previous [popover]:popover-open 
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

The two properties we want to animate are opacity and transform: we want the popover to fade in and out while growing and shrinking in the horizontal direction. We set a starting state for these properties on the default hidden state of the popover element (selected via [popover]), and an end state on the open state of the popover (selected via the :popover-open pseudo-class). We then set a transition property to animate between the two.

Because the animated element is being promoted to the top layer when shown and removed from the top layer when hidden — which also means that its hidden state has display: none set on it — the following properties are added to the list of transitioned elements to get the animation working in both directions. In both cases, transition-behavior: allow-discrete is set in the shorthand to enable discrete animation.

• display: Required so that the animated element is visible (set to display: block) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear.
• overlay: Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for simple animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective.

In addition, a starting state for the animation is set inside the @starting-style at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the display type changes from none to another type. @starting-style allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.

Result

The code renders as follows:

• overlay
• @starting-style
• CSS transitions module
• Four new CSS features for smooth entry and exit animations on developer.chrome.com (2023)