@starting-style已被w3c正式移除，2026年9月所有主流浏览器均不支持，静默忽略且无任何动画效果；推荐用visibility+getcomputedstyle+requestanimationframe手动控制初始帧，或element.animate()配合fill:'backwards'实现可靠入场动画。
@starting-style 已被 W3C 正式移除，当前（2026年9月）所有主流浏览器——包括 Chrome 127、Firefox 128、Safari 17.6、Edge 128——均不支持且静默忽略该规则。你写上它不会报错，也不会触发任何动画行为，DevTools 的 Styles 面板里查不到解析痕迹，getComputedStyle() 也完全不受影响。
@starting-style 为什么不能用作入场动画方案
- 它仅在“元素首次渲染且尚未应用任何样式”时才可能生效，而现代框架（React/Vue）、SSR、hydration、甚至
document.createElement()后立刻设className，都会破坏这个前提 - 必须配合
animation+animation-fill-mode: both才有意义，但旧版 Safari、Firefox、IE 全都不识别该 at-rule，连语法解析都跳过 - Chromium 119–125 曾短暂实验性支持，但已在 126+ 版本中彻底移除；现在连 Canary 也不再响应
常见错误现象：
- 写了
@starting-style { opacity: 0; }，元素却直接显示，毫无过渡 - 在 React 中用
useState控制 class，动画仍从终值开始——因为 DOM 挂载时已有样式，@starting-style被跳过 - 构建产物里保留该规则，但 IE11/Safari 14 等环境整条 CSS 规则块被丢弃，无 fallback
替代方案：手动控制初始帧（兼容性最好）
这是目前唯一能在 IE11 到 Safari 17 全线稳定运行的入场动画控制方式：
- 元素插入前设好初始样式（
opacity: 0、transform: translateY(20px)），并用visibility: hidden保留在渲染树中 - 插入后立即读取一个计算样式（如
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>
注意：
- 不要用
offsetTop或clientWidth触发重排，容易引发 layout thrashing -
visibility: hidden是关键：它让 transition 能捕获起始状态，又不占布局空间 - 若需多属性联动（如 opacity + scale + color），全部初始值和终值必须同步设置在 RAFCallback 中
更现代的选择：Element.animate() + fill: 'backwards'
适用于不需要支持 IE 或 Safari ≤ 16.6 的项目：
el.animate(
[{ opacity: 0, transform: 'scale(0.95)' }, { opacity: 1, transform: 'scale(1)' }],
{ duration: 300, easing: 'ease-out', fill: 'backwards' }
);
-
fill: 'backwards'确保动画未开始前就应用第一帧样式，等效于@starting-style的意图 - 不依赖 CSS 规则，JS 运行时可控，可结合 IntersectionObserver 做懒加载入场
- Firefox 125+、Chrome 124+、Safari 17.4+ 均已稳定支持；Safari 16.4–17.3 需加
fill: 'forwards'并手动设初始态兜底
真正容易被忽略的一点：“起始样式”问题本质不是 CSS 缺功能，而是浏览器渲染流水线中“样式计算”与“布局”时机错位导致的视觉跳变。所有试图靠 CSS 规则“声明式冻结初始态”的方案（包括已被废弃的 @starting-style、未落地的 @property 动画起始控制）都在和这个底层机制博弈。最稳的解法，仍是用 JS 显式锚定两个时间点：layout 前的初始态、RAF 开始时的目标态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
