如何利用CSS的@starting-style实现元素淡入？-css教程-PHP中文网

@starting-style仅在元素首次裸渲染时生效，需满足零样式起点、动画显式覆盖、声明位置正确三条件；Chrome/Edge 119+支持，Firefox/Safari不支持，须配transition fallback。

如何利用css的@starting-style实现元素淡入？

@starting-style 只在元素首次渲染且完全“裸”（无任何样式）时生效，配合 animation 才能实现真正从设定值开始的淡入；直接写、加 class、服务端渲染后 hydrate 都会跳过它。

为什么写了 `@starting-style` 却看不到淡入效果？

最常见原因是：元素根本没进入 @starting-style 触发条件。浏览器只对「刚插入 DOM 且尚未计算任何样式」的节点应用它——一旦有 class、内联 style、JS 设置过 opacity，就直接跳过。

React/Vue 组件挂载时通常已带 class，@starting-style 被静默忽略
服务端渲染（SSR）后的 HTML 已含样式，hydration 后 DOM 不再“首次”
写了 @starting-style { opacity: 0; }，但动画 keyframes 里没定义 opacity 变化，该声明被丢弃
把 @starting-style 放在 @keyframes 之后，CSS 解析顺序导致规则无效

怎么写出一个真正触发的淡入？

核心是让元素先“空着身子”进 DOM，再由 CSS 动画接管。必须满足三个硬性条件：零样式起点、动画显式覆盖、声明位置正确。

@starting-style 必须写在 @keyframes 和动画规则之前（CSS 自上而下解析）
动画必须包含 opacity 的起止帧，例如 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
目标元素不能有任何 class 或 style 属性，连空格都不能有：可以，不行
必须设置 animation-fill-mode: both，否则动画一结束就回退到初始状态，掩盖了 starting 效果

React 中如何绕过 hydration 破坏？

服务端渲染或 SSR 框架下，DOM 初始就带 class，@starting-style 失效是常态。唯一可靠办法是延迟注入动画 class，让元素先“裸”渲染一次。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

用 useState + useEffect 控制 class 注入时机：const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []);
HTML 中写 ，确保首次 render 时无 class
对应 CSS 中，.fade-in 必须包含 animation 和 animation-fill-mode: both


注意：若组件被 React.memo 或 shouldComponentUpdate 拦截，可能跳过首次裸渲染，需检查更新逻辑

@starting-style 不支持 display，别试了
想用 @starting-style { display: none; opacity: 0; } 实现“从无到有”？浏览器会直接忽略 display 声明——它不是可动画属性，且 display: none 让元素退出渲染树，@starting-style 根本不触发。

所有“入场”都得基于已参与样式计算的元素，所以只能用 opacity、transform、visibility 这类属性
如果需要隐藏空间占用，用 height: 0 + overflow: hidden 或 max-height 替代 display

目前仅 Chromium 119+（Chrome/Edge）支持，Firefox 和 Safari 完全不识别，必须提供 transition fallback

真正难的不是写对语法，而是控制 DOM 插入那一刻的“纯净度”——框架、构建工具、甚至 HTML 模板里的空格，都可能悄悄破坏这个前提。