移动端CSS动画卡顿主因是触发重排或频繁读写布局属性，安全属性仅transform、opacity、filter；iOS Safari易丢失animationend事件，需兜底定时器；入场动画须用独立class、forwards及兼容cubic-bezier。
移动端 CSS 动画卡顿、掉帧的常见原因
不是动画写得不够炫，而是多数 H5 页面在 iOS Safari 或安卓 WebView 里一动就掉到 30fps 以下。核心问题出在触发了重排（layout）或频繁读写 offsetTop / getBoundingClientRect() 这类属性，哪怕只是监听滚动做视差效果，也容易让主线程堵死。
真正安全的动画属性只有三个：transform、opacity、filter（部分安卓版本支持有限）。其他如 height、margin、left/top 都会强制触发重排，尤其在低端安卓机上几乎必然卡顿。
- 用
transform: translateX(100px)替代left: 100px - 动画元素尽量加
will-change: transform，但别滥用——只在动画开始前 1~2 帧设置，结束后立刻移除 - 避免在
scroll事件里直接改样式，改用requestAnimationFrame节流 +transform批量更新
iOS Safari 中 animationend 不触发的坑
这是 H5 上线后最常被忽略的“动画没播完就跳转”问题。iOS Safari 对极短动画（duration ≤ 16ms）、display: none 切换、或动画中途被 animation-play-state: paused 干预时，animationend 事件大概率丢失。
不能依赖它做状态清理或下一步逻辑，尤其涉及弹窗关闭、页面跳转、资源释放等关键路径。
立即学习“前端免费学习笔记（深入）”；
- 给动画加兜底定时器：
setTimeout(() => { /* 清理逻辑 */ }, duration + 100) - 避免在动画过程中突然设置
display: none，改用visibility: hidden+opacity: 0 - 检测是否真触发了事件：在
animationstart里设个标记位，animationend触发时清除；超时未清除则走降级流程
用 @keyframes 实现高性能入场动画的实操要点
轮播图标题淡入、商品卡片逐个上滑、加载骨架屏的波纹效果——这类“非交互式入场动画”最容易写出兼容又顺滑的效果，但细节稍不注意就会在安卓低版本 WebView 里失效。
关键是控制作用域和避免隐式继承干扰：
- 动画 class 必须带明确的
animation-fill-mode: forwards，否则动画结束瞬间样式回退 - 不要把
animation写在通用 class（如.card）里，而要用独立触发 class（如.card--animate-in），避免复用时状态混乱 - 安卓 4.4~6.0 的 WebView 对
cubic-bezier(.25,.46,.45,.94)支持不稳定，建议用ease-out或预设值，或 fallback 到linear - 示例：
@keyframes slideUpIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card--animate-in { animation: slideUpIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
第三方库（如 Animate.css）在 H5 里的取舍
直接引入 animate.css 看似省事，但在微信内置浏览器或某些安卓定制 WebView 中，部分动画（如 flip、rotateIn）会因 perspective 或 backface-visibility 缺失导致翻转错位甚至白屏。
更麻烦的是，它默认所有动画 duration 是 1s，而 H5 用户对等待极度敏感，0.3~0.5s 才是体验分水岭。
- 只 copy 需要的几个 keyframes 定义，删掉全部无关动画
- 把
animation-duration提到元素 class 里覆盖，例如：.title--bounce { animation-duration: 0.35s; } - 禁用所有涉及
transform: rotate3d或scaleZ的动画，它们在无硬件加速的 WebView 中极易崩
动画的边界不在“能做什么”，而在“哪些设备真能跑稳”。一个 transform 多写了个 z 轴，或者少加了 forwards，就可能让整页交互断在用户手指抬起的那一刻。
