@starting-style目前已无法用于弹窗渐入过渡，因被css工作组移除且无浏览器支持；应改用opacity+visibility配合transition，并注意pointer-events、will-change及transform优化。
@starting-style 目前（截至 2024 年中）**无法用于实现弹窗渐入过渡**，它不被任何主流浏览器支持，且已被 CSS 工作组从规范中移除。
为什么 @starting-style 不能用
该规则曾短暂出现在早期 CSS Transitions Level 2 草案中，意图在元素“首次渲染前”预设样式，以避免过渡跳变。但因实现复杂、与现有渲染模型冲突，Chrome 115+ 已明确弃用，Firefox 和 Safari 从未实现。尝试使用会直接被忽略，控制台也不会报错——你根本察觉不到它没生效。
真正可用的弹窗渐入方案：用 opacity + visibility 配合 transition
这是目前最稳定、兼容性最好（IE10+）、行为可预测的做法。关键不在“起点样式”，而在**控制显示时机与过渡触发时机分离**：
-
visibility: hidden确保元素不占位、不可交互，且过渡不会在隐藏状态下意外触发 -
opacity: 0作为过渡属性，配合transition: opacity 0.3s ease - 通过 JS 切换类名（如
.modal--open）来同时修改visibility和opacity，避免 CSS 过渡被跳过
示例：
.modal {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal--open {
visibility: visible;
opacity: 1;
}
注意：不能只靠 opacity 控制显隐（会导致点击穿透），也不能把 transition 写在 .modal--open 上（部分浏览器会漏掉初始帧）。
更健壮的写法：加 pointer-events 和 will-change
弹窗常含表单或按钮，需确保过渡期间不响应点击；动画性能敏感时也建议提示渲染器：
-
pointer-events: none在隐藏态设为none，显隐态切换时同步更新 -
will-change: opacity可加在.modal上，但仅在动画频繁时启用（避免过度优化反拖慢） - 若需位移配合淡入（如从顶部滑下），优先用
transform: translateY()而非top，保证 GPU 加速
实际项目里，最易被忽略的是 visibility 和 opacity 的协同时机——少一个，要么闪一下，要么点不着，要么动画不动。别碰 @starting-style，它不是还没成熟，是已经没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
