@starting-style 能解决 transition 首次不生效，是因为它在元素首次样式计算前强制注入起始样式值（如 opacity: 0、transform: scale(0.8)），为 transition 明确锚定第一帧上下文；但该规则已被 w3c 移除，当前所有主流浏览器均不支持，实际不可用。
为什么 @starting-style 能解决 transition 首次不生效？
因为浏览器在元素首次渲染时，往往还没来得及读取 CSS 中定义的 transition 属性，就已根据初始 HTML 状态（比如内联 style 或 DOM 初始值）完成了布局和绘制。此时过渡动画被跳过——不是 transition 写错了，而是“起点”没被识别为可动画状态。
@starting-style 的作用，就是在元素进入样式计算前，**强制注入一组起始样式值**，让浏览器明确知道：“这个元素刚出现时，它的 opacity 是 0、transform 是 scale(0.8)”，从而把后续的 transition 起点锚定住。
它不是替代 transition，而是补全其缺失的“第一帧上下文”。目前（2024 年中）仅 Chromium 111+ 原生支持（Chrome / Edge / Opera），Firefox 和 Safari 尚未实现，需配合 JS 回退逻辑。
怎么写一个可用的 @starting-style 规则？
规则必须直接作用于目标元素的选择器，且只接受声明式样式（不能含伪类、媒体查询嵌套等）。常见写法如下：
button {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s, transform 0.3s;
}
<p>@starting-style {
button {
opacity: 0;
transform: scale(0.8);
}
}</p>
注意三点：
-
@starting-style中的样式**不会覆盖正常 CSS 规则**，只在“元素首次样式计算前”临时生效 - 必须与目标元素的最终样式**属性完全一致**（比如用了
transform，就不能只写scale()而漏掉translate()） - 不支持 CSS 变量（
var(--x)）、inherit、unset等动态值，只能写具体字面量
什么时候必须搭配 JavaScript 使用？
当元素是动态插入（如 el.append(newDiv)）、或由框架（React/Vue）控制显隐时，@starting-style 本身无法触发重排，需要手动“激活”过渡上下文：
- 给元素加一个临时 class（如
is-entering），并在该 class 下定义 transition 和起始样式 - 用
getComputedStyle(el).opacity强制触发样式计算（避免浏览器优化跳过） - 更稳妥的做法：插入后
el.offsetHeight+requestAnimationFrame再移除起始 class
例如：
const el = document.createElement('div');
el.className = 'fade-in';
container.append(el);
<p>// 强制读取，确保 starting-style 生效
getComputedStyle(el).opacity;</p><p>// 然后在下一帧移除起始态（如果用了 JS 回退）
requestAnimationFrame(() => {
el.classList.remove('fade-in--initial');
});</p>
兼容性 fallback 怎么写才不翻车？
不能只靠 @supports (transition: all) {}，因为 @starting-style 是独立特性。正确检测方式是：
@supports (animation: test) and (not (starting-style: auto)) {
/* 这里不写 @starting-style，因为不支持 */
.fade-in {
opacity: 0;
transform: scale(0.8);
}
.fade-in.active {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s, transform 0.3s;
}
}
但更实际的做法是：默认用 JS 控制 class 切换（保证全浏览器一致），再用 CSS.supports('starting-style', 'auto') 在支持的浏览器中启用原生方案，避免 JS 动画抖动。真正容易被忽略的是：**transition 属性必须始终定义在非起始状态上**，否则即使 @starting-style 生效，浏览器仍可能因缺少 transition 声明而静默降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
