移动端CSS过渡不流畅主因是渲染路径未优化：需动态启用will-change（如touchstart时设transform，结束后清空），优先用transform/opacity避免触发布局重排，配合contain、prefers-reduced-motion及移除filter/box-shadow等降级因素。
移动端 CSS 过渡不流畅，往往不是因为动画逻辑写错了，而是浏览器没把相关元素提前“安排好”渲染路径。直接加 will-change 并不能自动变丝滑，关键在于用对时机、选对属性、配合其他优化手段。
只对真正要动的元素启用 will-change
滥用 will-change: transform 反而会拖慢性能——浏览器会提前为其创建独立图层、分配额外内存。只在交互触发前（比如 hover、touchstart 时）动态添加，动完再移除：
- 用 JavaScript 在触摸开始时加：
element.style.willChange = 'transform' - 在 transitionend 或 animationend 后立刻清空：
element.style.willChange = 'auto' - 避免写在 CSS 里全局声明（如
div { will-change: transform; }），这会让所有 div 都被强制升层
优先使用 transform 和 opacity 做过渡
这两类属性能走 GPU 合成，不触发布局（Layout）和绘制（Paint）。千万别用 left/top/width/height 或 background-color 做过渡：
- ✅ 推荐：
transform: translateX(100px);、opacity: 0.5; - ❌ 避免：
left: 100px;、width: 200px;、color: red; - 如果必须改背景色，可用
transform: translateZ(0)强制硬件加速（但不如 opacity 稳定）
配合 contain 和 reduce motion 提升兼容性
给动画容器加 contain: layout paint，可限制重绘范围；同时尊重系统偏好，检测用户是否开启“减少动画”：
立即学习“前端免费学习笔记（深入）”；
-
.slider { contain: layout paint; }能防止子元素变化影响父级布局计算 - 用媒体查询适配：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } } - JavaScript 中也可监听：
window.matchMedia('(prefers-reduced-motion: reduce)').matches
检查是否被其他样式拖累
即使用了 will-change，若元素有 box-shadow、filter（如 blur）、或父级有 overflow: hidden，仍可能降级到 CPU 渲染：
- 过渡中暂时移除
filter，用transform: scale()模拟模糊感（需权衡） - 阴影尽量用
transform: translateZ(0)升层，或改用渐变模拟 - 避免在滚动容器内做复杂过渡，考虑用
position: fixed脱离文档流
