应按设备能力分级控制动画：桌面端保留完整关键帧，移动端用@media(max-width:768px)延长animation-duration至1.8s，prefers-reduced-motion下设animation:none，禁用hover改用:active或touchstart，fixed定位用inset:0更稳，仅用transform/opacity触发gpu加速，js需等document.readystate===’complete’及图片加载完成再触发，并及时remove开屏dom。
怎么用媒体查询控制动画复杂度
小屏幕设备跑不动高帧率动画，硬上 transform + opacity 连续变化容易掉帧。直接关掉动画不是办法，得按设备能力分级：桌面端保留完整关键帧，移动端简化或降频。
- 用
@media (max-width: 768px)拦截中屏以下设备，把animation-duration从1.2s提到1.8s，降低单位时间计算压力 - 在
@media (prefers-reduced-motion: reduce)下，直接设animation: none或回退到opacity: 1硬切，这是系统级可访问性要求，绕不过 - 别用
hover触发动画——手机没 hover，伪类会失效；改用:active或 JS 监听touchstart后加 class 控制
全屏开屏动画的定位和尺寸陷阱
position: fixed 是必须的，但很多人漏掉 inset: 0 或写成 top: 0; left: 0; right: 0; bottom: 0 ——后者在 safari 旧版本里有渲染延迟，inset 更稳。
- 背景图用
background-size: cover，但必须配background-attachment: fixed，否则 ios 滚动时会撕裂 - 动画元素如果含文字，
font-size要用rem或vw，不能写死px；否则在 iphone X 等刘海屏上文字可能被裁掉 - 避免对
body设overflow: hidden来防滚动——Safari 会触发页面重排，改成对开屏容器自身设overflow: hidden
动画性能卡在 transform 和 opacity 上
只有 transform 和 opacity 能进合成层，其他属性如 height、margin、background-color 都会触发布局+绘制，开屏动画一卡就是这儿。
- 想实现“从中间放大”，别用
scale(0)→scale(1)，而要用transform: scale(0) translateZ(0)强制开启 GPU 加速 - 渐入渐出只用
opacity，别混用visibility: hidden——它不参与动画，会在关键帧中途突然消失，打断视觉流 - 动画结束后记得加
animation-fill-mode: forwards，不然动画停住瞬间元素会闪回初始状态
JS 控制开屏显示时机的几个硬条件
css 动画可以声明，但什么时候播、播几次、播完干啥，全靠 JS 卡点。常见问题是 DOM 没就绪就播，或者图片没加载完就动，画面撕裂。
立即学习“前端免费学习笔记（深入）”；
- 等
document.readyState === 'complete'再初始化，比DOMContentLoaded更保险，确保图片、字体都载入了 - 用
img.onload或IntersectionObserver监控主视觉图加载完成，再移除开屏容器的hidden属性 - 动画播完后，立刻用
element.remove()干掉开屏 DOM，别留着占内存——尤其单页应用反复进出路由时
动画最麻烦的从来不是写几行 @keyframes，而是设备差异、加载顺序、合成层边界这些看不见的约束。写完别急着测 chrome，先开 Safari 的 Web Inspector 看 Layers 面板，再拿真机连上 Remote Debug 测帧率。