@starting-style 目前未被任何主流浏览器支持，仍处于css提案阶段；它旨在解决display切换时transition跳过初始值的问题，但实际无效，需用javascript强制触发或animate() api配合fill: 'backwards'实现。
@starting-style 目前（截至 2024 年底）不被任何主流浏览器原生支持，它仍处于 CSS WG 的提案阶段（CSS Transitions Level 2），尚未进入正式标准实现。你无法在生产环境中可靠使用 @starting-style 来定义元素首次显示时的初始过渡状态。
这意味着：写上它不会报错，但也不会生效；DevTools 中看不到对应计算值；transition 依然从“真实初始值”开始，而非你期望的 @starting-style 声明值。
为什么 @starting-style 被设计出来？
它想解决的是这个经典问题：
元素从 display: none 切换为 display: block 后立即触发 transition: opacity 0.3s，但浏览器实际会跳过 opacity 的过渡——因为元素之前不可见，其“起始 computed style”就是 opacity: 1（不是你想要的 0）。
@starting-style 的本意是允许你显式声明：“这个元素刚插入/显示时，应视为处于这些样式值下”，例如：
@starting-style {
opacity: 0;
transform: translateY(20px);
}
但——这行不通，因为没浏览器实现它。
替代方案：用 JS + getComputedStyle 强制触发初始帧
真正可行的做法是「绕过浏览器对 display 切换的优化」，分两步控制：
- 先让元素可见但不可见（
visibility: hidden; opacity: 0; position: absolute;或用aria-hidden配合pointer-events: none） - 在下一帧（
requestAnimationFrame）再移除隐藏样式并应用目标样式
常见实操步骤：
- 将元素初始设为
opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.3s; - 插入 DOM 后，立即调用
getComputedStyle(el).opacity（强制触发样式计算） - 然后在
requestAnimationFrame回调里移除visibility: hidden并设置目标值（如opacity: 1; transform: translateY(0);）
el.style.opacity = '0';
el.style.visibility = 'hidden';
document.body.appendChild(el);
<p>// 强制 layout
getComputedStyle(el).opacity;</p><p>requestAnimationFrame(() => {
el.style.visibility = 'visible';
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
});</p>
更稳妥的现代替代：使用 animate() API + keyframes
如果你只需要入场动画（而非依赖 CSS transition 的声明式响应），Element.animate() 是目前最可控、兼容性足够（Chrome 36+, Firefox 48+, Safari 16.4+）的方式：
el.animate([
{ opacity: 0, transform: 'translateY(20px)' },
{ opacity: 1, transform: 'translateY(0)' }
], {
duration: 300,
easing: 'ease-out',
fill: 'backwards' // 关键：让第一帧样式生效于动画开始前
});
fill: 'backwards' 就是你要的“首次显示时的初始状态”——它会在动画未开始时就应用起始关键帧，且不受 display 切换干扰。
@starting-style 是个好想法，但它现在只是纸面规范。真要控制首次显示的过渡起点，得靠 JavaScript 主动干预时机，或改用 animate() + fill: 'backwards' 这类已落地的机制。别在 CSS 里白加 @starting-style 块——它不会做任何事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
