CSS starting-style 进入动效稳定化 与首帧优化实践

概览`@starting-style` 允许在元素进入时定义动画或过渡的初始样式，避免浏览器推断导致的首帧闪烁。适用于弹层、卡片与大图进入动效治理。基础用法.modal { opacity: 1; translate: 0 0; transition: opacity 200ms ease, translate 200ms ease; } @starting-style { .modal { opacity: 0; translate: 0 12px; } } 卡片进入.card { opacity: 1; transition: opacity 160ms ease; } @starting-style { .card { opacity: 0; } } 治理要点为进入动效定义明确的起始样式，避免首帧跳变与闪烁。控制过渡属性与时长，保持轻量与可读性；对大组件使用简短过渡。与 `prefers-reduced-motion` 协同，为低动效用户禁用或缩短过渡。验证与指标浏览器：Chrome 117+、Edge 117+；Safari/Firefox 逐步支持（不支持时退化为普通过渡）进入动效稳定；首帧无闪烁与跳变