transition-behavior

Baseline 2024 *

新推出

自 ⁨2024 年 8 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在旧设备或浏览器上使用。

* 此特性的某些部分可能存在不同级别的支持。

transition-behavior CSS 属性指定是否为动画行为为离散的属性启动过渡。

语法

css

/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

值

allow-discrete: 元素的离散动画属性将启动过渡。
normal: 元素的离散动画属性将不启动过渡。

描述

transition-behavior 属性仅在与其他过渡属性（特别是 transition-property 和 transition-duration）结合使用时才相关，因为如果没有任何属性在非零时间内进行动画，则不会发生过渡。

css

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

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

transition-behavior 值可以作为缩写 transition 声明的一部分。当包含在缩写中，并且使用或默认所有属性时，allow-discrete 值对常规可动画属性没有影响。以下 CSS 等同于上述长手声明

css

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

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

在上面的代码片段中，我们两次包含了 transition 属性。第一个实例不包含 allow-discrete 值——这提供了跨浏览器支持，确保卡片的其他属性在不支持 transition-behavior 的浏览器中仍然进行过渡。

离散动画行为

离散动画属性通常在两个值之间动画的 50% 处翻转。

但是有一个例外，那就是当动画到或从 display: none 或 content-visibility: hidden 时。在这种情况下，浏览器将在两个值之间翻转，以便过渡内容在整个动画持续时间内显示。

所以例如：

当 display 从 none 动画到 block（或其他可见的 display 值）时，该值将在动画持续时间的 0% 处切换到 block，使其在整个过程中可见。
当 display 从 block（或其他可见的 display 值）动画到 none 时，该值将在动画持续时间的 100% 处切换到 none，使其在整个过程中可见。

正式定义

初始值	`normal`
应用于	所有元素
继承性	否
计算值	同指定值
动画类型	不可动画化

正式语法

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

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

示例

在此示例中，当弹出窗口从隐藏到显示再返回时，它会进行动画过渡。

HTML

HTML 包含一个使用 popover 属性声明为弹出窗口的 <div> 元素，以及一个使用其 popovertarget 属性指定为弹出窗口显示控制的 <button> 元素。

html

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

CSS

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

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

css

[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);
  }
}

我们想要动画的两个属性是 opacity 和 transform：我们希望弹出窗口在水平方向上放大和缩小时淡入淡出。我们在弹出窗口元素的默认隐藏状态（通过 [popover] 选择）上设置这些属性的起始状态，并在弹出窗口的打开状态（通过 :popover-open 伪类选择）上设置结束状态。然后我们设置 transition 属性以在两者之间进行动画。

由于动画元素在显示时被提升到顶层，在隐藏时从顶层移除——这也意味着其隐藏状态设置了 display: none——因此将以下属性添加到过渡元素列表中，以使动画在两个方向上都起作用。在这两种情况下，transition-behavior: allow-discrete 在简写中设置以启用离散动画。

display：必需，以便动画元素在进入和退出动画期间都可见（设置为 display: block）。没有它，退出动画将不可见；实际上，弹出窗口将直接消失。
overlay：必需，以确保在动画完成后才延迟从顶层移除元素。这对于像这样简单的动画没有太大区别，但在更复杂的情况下，不这样做可能会导致元素过快地从叠加层中移除，这意味着动画不流畅或无效。

此外，动画的起始状态在 @starting-style at-rule 中设置。这是为了避免意外行为。默认情况下，过渡不会在元素的首次样式更新时触发，也不会在 display 类型从 none 更改为其他类型时触发。@starting-style 允许您以特定的受控方式覆盖该默认行为。没有它，进入动画将不会发生，弹出窗口将直接出现。

结果

代码渲染如下：

备注： 因为 popover 每次显示时都会从 display: none 变为 display: block，所以每次进入过渡发生时，popover 都会从其 @starting-style 样式过渡到其 [popover]:popover-open 样式。当 popover 关闭时，它会从其 [popover]:popover-open 状态过渡到默认的 [popover] 状态。

在这种情况下，进入和退出时的样式过渡可能会有所不同。请参阅我们的何时使用起始样式的演示示例以证明这一点。

规范

规范
CSS Transitions Level 2 # transition-behavior 属性

浏览器兼容性

另见

overlay
@starting-style
CSS 过渡模块
用于平滑进入和退出动画的四个新 CSS 功能，来自 developer.chrome.com (2023)

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于 2025 年 10 月 13 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题