@starting-style 目前不被任何主流浏览器支持，仍处于css动画规范早期提案阶段，chrome、firefox、safari均未实现，devtools中会直接忽略该规则。
@starting-style 目前（截至 2024 年中）**不被任何主流浏览器支持**，不能用于实现弹窗淡入动效。它仍处于 CSS 动画规范的早期提案阶段，Chrome、Firefox、Safari 均未实现，也未进入 prefixed 实验性阶段。
为什么你搜不到可用的 @starting-style 示例
因为这不是一个“还没写对”的问题，而是根本不可用。你在 DevTools 里写 @starting-style，CSS 解析器会直接忽略整条规则；检查元素样式面板里不会出现它；getComputedStyle 也无法读取其声明。它不像 @layer 或 aspect-ratio 那样已有渐进支持。
常见错误现象包括：
- 弹窗首次显示时无过渡，
opacity: 0 → 1瞬间跳变 - 手动加
transition: opacity 0.3s但初始渲染就已是opacity: 1，动效不触发 - 误以为要配合
animation+@keyframes使用，结果发现@starting-style并不控制动画起始帧
真正能用的原生弹窗淡入方案（无需 JS 控制 class）
想让弹窗“自然地从透明态开始过渡”，关键不是等未来特性，而是利用现有 CSS 的渲染时机和层叠逻辑。核心思路：让元素在 DOM 中存在，但初始状态满足两个条件——不可见 + 可过渡 + 不占布局。
- 用
opacity: 0+pointer-events: none隐藏并禁用交互 - 用
visibility: hidden（而非display: none）保持样式可继承、过渡可注册 - 通过
:is(:has(<dialog>[open]))</dialog>或显式 class 切换触发动效（现代方案依赖:has()，兼容性需查 Can I Use） - 更稳妥做法：用
dialog元素 +showModal()，然后监听aftertoggle事件，JS 添加类 —— 这是目前最可靠路径
示例（纯 CSS，兼容 Chrome/Firefox/Safari）：
dialog {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s step-end;
}
dialog[open] {
opacity: 1;
visibility: visible;
}
注意：visibility 的 step-end 是关键，避免 visibility 在过渡中途变为 visible 导致点击穿透。
如果坚持用声明式动效，替代 @starting-style 的可行方向
目前没有“声明式起始样式”的替代语法，但可通过组合现有特性逼近效果：
-
animation: fadeIn 0.3s forwards+@keyframes fadeIn { from { opacity: 0; } }：需确保元素插入时动画尚未播放完（用animation-delay或 JS 触发） - CSS
view-transitionAPI（Chrome 111+）：对<dialog></dialog>或普通容器启用视图转换，document.startViewTransition(() => dialog.showModal())可驱动淡入，但 Safari/Firefox 尚未支持 - 借助
content-visibility: hidden控制渲染时机，配合opacity过渡 —— 适合长列表中动态弹窗，但非通用解法
真正难的不是写动效代码，而是判断某个 CSS 特性是否已落地。查 @starting-style 的 MDN 页面或 caniuse.com，会看到明确标注 “No support”。别在不可用的语法上调试样式优先级或缓动函数 —— 它连解析都不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
