低性能设备动画卡顿主因是写法不当而非浏览器不支持，应改用transform/opacity等可合成属性、精简transition声明、控制时长与缓动、轻量启用硬件加速，并响应prefers-reduced-motion及设备能力做降级。
过渡动画在低性能设备上卡顿，不是因为浏览器不支持 CSS transition，而是动画执行路径没走对——关键在于避开重排重绘、控制合成开销、适配设备能力。兼容性问题常被误认为是“老浏览器不支持”，其实多数卡顿来自写法不当或未做降级响应。
用 transform 和 opacity 替代 layout 属性
低性能设备对 `left`、`top`、`width`、`margin` 等触发重排的属性极其敏感，哪怕加了 `transition` 也会掉帧。必须改用可合成属性：
- 位移用
transform: translateX(10px)，别用left: 10px - 缩放用
transform: scale(1.1)，避免修改width/height - 显隐切换只用
opacity，禁用visibility或display（二者不可过渡） - 确保起始/结束状态都明确：比如
transform: translateX(0)→translateX(20px)，不要用none作为起点
精简 transition 声明，禁用 all
transition: all 0.3s 在低端机上极易失效或卡顿，因为浏览器会尝试插值所有属性，而很多（如 display、height: auto）根本不可动画，整条规则可能被静默忽略。
- 只写真正要动的属性：
transition: background-color 0.25s ease, transform 0.25s ease; - 时间控制在 0.2s–0.3s：短于 0.15s 用户感知不到，长于 0.35s 显得拖沓
- 缓动函数优先用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（Material 风格），比默认ease更跟手
硬件加速要轻量启用，不滥用 will-change
在低端 Android 或旧 iOS 上，`will-change: transform` 若长期开启，反而增加内存压力和图层分裂，导致更卡。
- 推荐默认加轻量提升：
transform: translateZ(0)或transform: translate3d(0, 0, 0)（对 iOS Safari 仍有效） -
will-change只在 hover 前一帧动态添加，动完立刻移除（可用 JS 控制 class 切换） - 避免给多个元素同时加
will-change，尤其不要作用于滚动容器或列表项
响应设备能力，主动降级动画
不是所有用户都需要华丽动效。可通过系统偏好和运行时检测做分级处理：
- 监听
prefers-reduced-motion媒体查询，关闭非必要动画：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } - 对低端设备 UA 或低内存环境（
navigator.deviceMemory ），加载简化版 CSS 或禁用 hover 动画 - 移动端点击反馈务必补
:active状态，并用touch-action: manipulation消除 300ms 延迟
不复杂但容易忽略。核心就三点：属性选对、声明写准、设备感知到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
