如何使用CSS @starting-style解决元素首次渲染的动画问题？-css教程-PHP中文网

@starting-style 已被 w3c 移除且所有主流浏览器均不支持，它仅在元素已布局并发生状态变更时才生效，对动态插入或 display: none 元素无效；推荐用 getcomputedstyle 强制重排后 requestanimationframe 切换样式，或使用 element.animate() 配合 fill: 'backwards' 实现可靠入场动画。

如何使用css @starting-style解决元素首次渲染的动画问题？

@starting-style 已被 W3C 正式移除，当前任何主流浏览器都不支持它。你写上它不会报错，但也不会触发任何动画效果——它就是个“静默失效”的规则。

如果你正试图用 @starting-style 让一个刚插入 DOM 的元素（比如 document.createElement('div')）产生首次显示的 transition 动画，那这条路走不通。

`@starting-style` 为什么不起作用

它的设计前提是：元素已存在于 DOM 中、且已参与样式计算（即已 layout），只是首次应用某个 class 或状态变更。
对 display: none 元素、动态插入后立刻加 class 的元素、或服务端渲染后首屏直接带 class 的元素，@starting-style 完全不生效。
DevTools 的 Computed 面板里查不到它设置的值，说明浏览器压根没读取这条规则。
常见现象：元素从隐藏到显示时，opacity 或 transform 直接跳到终值，没有过渡。

替代方案：手动控制初始帧（兼容性最好）

这是目前最稳定、无需 polyfill、所有现代浏览器都支持的做法：

元素插入前设为 visibility: hidden + 初始动画样式（如 opacity: 0, transform: translateY(20px)）
插入 DOM 后立即调用 getComputedStyle(el).opacity（或其他任意可读属性），强制触发 layout
在 requestAnimationFrame 回调中移除 visibility: hidden 并设为目标样式

el.style.visibility = 'hidden';
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
document.body.appendChild(el);
<p>// 强制读取，触发重排
getComputedStyle(el).opacity;</p><p>requestAnimationFrame(() => {
el.style.visibility = 'visible';
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
});</p>

注意：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

不要用 offsetTop 或 clientWidth 等可能触发重排的属性代替 getComputedStyle，容易引发 layout thrashing
visibility: hidden 是关键：它让元素在渲染树中但不可见，确保 transition 能捕获起始状态

更现代的选择：`Element.animate()` + `fill: 'backwards'`

如果你不需要支持 IE 或 Safari ≤ 16.6，推荐直接用原生动画 API：

el.animate(
  [
    { opacity: 0, transform: 'translateY(20px)' },
    { opacity: 1, transform: 'translateY(0)' }
  ],
  {
    duration: 300,
    easing: 'ease-out',
    fill: 'backwards' // ← 关键：动画未开始时就应用起始帧
  }
);

优势：