@starting-style 不支持与 display 配合实现“从无到有”过渡，因其仅作用于已存在 DOM 且参与样式计算的元素，而 display: none 使元素退出渲染树致其失效；应改用 opacity/visibility/transform 等可动画属性组合实现入场效果。
@starting-style 目前（截至 Chrome 125、Firefox 127、Safari 17.5）**不支持与 display 属性配合实现“从无到有”的过渡**——这是个常见误解，也是实际开发中踩坑最多的地方。
为什么 @starting-style 无法初始化 display 的动画起点
@starting-style 只能为元素在尚未被渲染（即未进入渲染树）前，设置一组**可动画的 CSS 属性初始值**，但它有一个硬性前提：该元素必须已存在于 DOM 中，且已参与样式计算。而 display: none 会让元素完全退出渲染树，此时 @starting-style 根本不会生效。
-
display本身不是 CSS 动画属性（不在 CSS Transitions 规范可动画属性列表中），浏览器不支持display: none → block的插值过渡 - 即使你写
@starting-style { display: none; opacity: 0; }，浏览器会直接忽略display声明，只应用opacity等合法属性 - 元素首次插入 DOM 时若为
display: none，@starting-style不触发；若为display: block但靠opacity/transform隐藏，则@starting-style才有机会介入
真正可行的“从无到有”过渡方案
想实现视觉上“淡入+展开”的入场效果，必须绕过 display，改用浏览器支持动画的属性组合：
- 用
opacity: 0+visibility: hidden替代display: none控制“是否可见”，确保元素始终在渲染树中 - 用
height: 0+overflow: hidden模拟“高度坍缩”，再配合height: auto过渡（注意：height: auto无法直接动画，需用max-height或 JS 测量） - 对 flex/grid 容器子项，可用
scaleY(0)+transform-origin: top实现垂直收缩入场 - 示例（纯 CSS，无需 JS）：
.item { opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; } .item.active { opacity: 1; visibility: visible; transform: scaleY(1); }
@starting-style 的正确使用场景和限制
它只在元素**首次应用动画类、且此前未渲染过**时起作用，典型用于避免“闪现”（flash of unstyled content）：
立即学习“前端免费学习笔记（深入）”；
- 适用于
opacity、transform、color、background-color等可动画属性 - 必须配合
transition或@keyframes使用，单独写无效 - 不能用于伪元素（
::before/::after）、content、font-size（部分浏览器不支持）等受限属性 - 示例（安全用法）：
@starting-style { opacity: 0; transform: translateY(-10px); } .animated { animation: fadeInUp 0.4s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
最常被忽略的一点：哪怕你把所有属性都写对了，只要元素是通过 display: none 切换显隐的，@starting-style 就永远没机会运行——它不是“隐藏时的样式”，而是“即将开始动画前的样式快照”。要让它工作，得让元素始终“在场”。
