CSS @starting-style 怎样为首次显示补上过渡起点

第一次打开抽屉时，面板总是“啪”地出现，第二次打开却有过渡；或者一个新插入的卡片明明写了 transition，仍然没有进入动画。问题通常不在持续时间，而在浏览器没有拿到这个元素的上一个可渲染状态。

CSS @starting-style 专门为首次渲染或从 display: none 变为可见的元素补充过渡起点。官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40starting-style。它只负责“从哪里开始”，最终状态仍由普通规则决定。

修复这类首次显示动画，要同时写好最终状态、transition 属性和 @starting-style 起始状态；如果涉及 display，还要把离散过渡和无障碍降级一起考虑。

先还原一次没有起点的显示故障

下面的例子给新建卡片设置了透明度和缩放过渡，但只写了终态：

.notice {
  /* 终态是可见卡片，但没有定义首次渲染前的状态 */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease;
}

.notice.is-hidden {
  /* 这个状态适合已有元素的普通切换 */
  opacity: 0;
  transform: translateY(8px);
}

当 .notice 第一次进入 DOM 时，浏览器看到的是“现在要显示的样子”，却没有上一轮可比较的样式。于是 transition 没有可插值的起点，卡片直接落到终态。给一个已有元素从 .is-hidden 切换到可见状态时，才会正常使用普通的前后状态。

用独立规则给首次渲染补上起点

独立写法把“正常规则”和“首次起点”分开。关键是让 @starting-style 位于原规则之后：两者选择器可以有相同优先级，后出现的起点规则才能在首次计算时发挥作用。

.notice {
  /* 普通状态：动画要到达的终态 */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease;
}

@starting-style {
  .notice {
    /* 首次显示从透明、向下偏移的位置开始 */
    opacity: 0;
    transform: translateY(8px);
  }
}

这段代码的职责很清楚：普通规则描述“显示后是什么样”，@starting-style 描述“第一次显示前从什么样子开始”。它不是永久覆盖普通规则的隐藏状态，也不会改变已经渲染过的元素下一次普通状态切换。

嵌套写法适合把起点和终态放在一起

如果项目启用了 CSS nesting，可以把起始声明放入同一个选择器。这样不容易把组件的起点和终态分散到很远的位置：

.notice {
  /* 组件的最终可见状态与过渡属性 */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms ease, transform 240ms ease;

  @starting-style {
    /* 嵌套块只描述首次显示的起始值 */
    opacity: 0;
    transform: translateY(8px);
  }
}

独立写法更适合需要多个选择器的场景，例如弹出层的打开伪类；嵌套写法更适合组件样式。两种写法的语义相同，选择时优先考虑团队的 CSS 构建链和规则可读性。

从 display:none 进入可见状态时，要补齐离散过渡

抽屉、弹窗和折叠面板经常在隐藏时写 display: none。这时仅过渡 opacity 并不够：元素如果立刻变成 none，淡出过程没有机会绘制；进入时也需要让元素在过渡期间保持可见。

.panel {
  /* 默认是可见终态，display 的切换允许参与过渡 */
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    display 240ms allow-discrete;
}

.panel.is-hidden {
  /* 隐藏时保留连续属性的离场终点 */
  opacity: 0;
  transform: translateY(8px);
  display: none;
}

@starting-style {
  .panel {
    /* 从 display:none 重新出现时使用这个进入起点 */
    opacity: 0;
    transform: translateY(8px);
  }
}

allow-discrete 不是让 display 像透明度一样逐帧插值，而是允许这个离散属性在过渡时间点切换。它和 opacity、transform 配合，才有机会让用户看到完整的进出场过程。

故障复盘：为什么写了仍然不动

这类问题通常沿着三个时间点暴露。第一，组件首次插入 DOM 时直接显示，说明只有终态没有起点。第二，把起点规则放到了普通规则之前，结果普通规则覆盖了它。第三，退出时把 display 立即设为 none，导致淡出视觉还没绘制就消失。

可以按下面的顺序定位：

1. 确认目标属性在普通规则中有 transition，并且普通规则确实写出了终态。
2. 确认 @starting-style 的选择器能选中同一个元素，独立块放在原规则之后。
3. 确认元素是首次渲染、DOM 新增或从 display: none 变为可见，而不是已经渲染过的普通类名切换。
4. 涉及 display 时，检查 transition 列表和 allow-discrete 是否同时出现。
5. 检查是否命中了 prefers-reduced-motion 的项目级样式，避免把“无动画”误判成 CSS 失效。

兼容和无障碍边界要提前写进方案

MDN 将 @starting-style 标记为 2024 年起在最新设备和浏览器中可用，但旧设备或旧浏览器仍可能不支持。首次显示动画不是业务信息本身，因此不应让它成为功能入口。可以用 @supports 包住增强样式，让不支持的浏览器保留静态可见结果：

.notice {
  /* 不支持增强特性时也能直接看到内容 */
  opacity: 1;
}

@supports (selector(:popover-open)) {
  /* 只在能力可识别时增加首次显示过渡 */
  @starting-style {
    .notice {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice {
    /* 尊重用户的减弱动态偏好，避免强制播放动画 */
    transition: none;
  }
}

这里的 @supports 条件只是示意项目如何包住渐进增强；实际项目应根据目标能力选择更直接的特性条件。不要为了追求进场效果，让旧浏览器中的面板不可见，也不要覆盖用户主动设置的减弱动态偏好。

最后记住三种样式状态

首次显示相关的 CSS transition 可以拆成三种状态：起点状态由 @starting-style 提供，过渡后的状态由普通规则提供，默认或退出状态由组件的隐藏规则提供。起点只在元素之前没有可渲染状态时生效，不是每次打开都自动回到同一个起点。

如果组件要反复打开，请把“首次进入”和“重复切换”分开设计；如果组件涉及 display，再把 allow-discrete、退出时机和 reduced-motion 一起纳入检查。这样排查时看到的“第一次不动”，就能从一个模糊的动画问题还原成明确的状态缺失问题。

相关问题

@starting-style 能代替 CSS animation 吗？不能。它是为 CSS transition 补充首次样式起点；如果使用 CSS animation，通常不需要它。

为什么退出动画不是从 @starting-style 返回？元素已经渲染过后，退出会从当前可见状态回到普通隐藏状态，起始规则不会作为永久默认值。

独立写法和嵌套写法怎么选？多选择器、伪类或伪元素场景优先考虑独立块；组件局部样式可用嵌套块，但要确认构建链支持 CSS nesting。