移动端 CSS 动画卡顿？检查 transform 属性
移动端 CSS 动画卡顿通常是因为动画属性触发了重排，检查 transform 属性可以避免重排并提升性能。
动画卡顿的常见原因与排查方向
移动端网页动画出现卡顿或掉帧时，通常是因为动画操作触发了浏览器的重排或重绘。重排是指元素的位置或尺寸发生变化，浏览器需要重新计算布局；重绘则是元素外观发生变化但布局未变。这两种操作都会占用主线程资源，导致动画不流畅。在排查时，应优先检查动画所使用的 CSS 属性是否属于会触发重排的类型，例如宽度、高度、外边距或定位属性。
根据性能分析资料，当动画属性不触发重排或重绘时，浏览器可以将采样操作移出主线程。这意味着动画可以在合成线程中执行，从而利用 GPU 加速，显著提升性能。因此，在移动端优化动画时，应尽量选择不会触发重排的属性。如果动画使用了宽、高、边距等属性，建议将其替换为 transform 属性，以避免主线程阻塞，确保动画在移动设备上流畅运行。
使用 transform 属性避免重排
transform 属性是移动端动画优化的首选，因为它不会改变元素在文档流中的位置或尺寸，因此不会触发重排。资料指出，只要动画属性不触发重排，浏览器就可以将采样操作移出主线程。这意味着使用 transform 属性的动画可以在合成线程中执行，从而利用 GPU 加速，特别是在移动设备上能获得更好的性能和效率。
具体操作时，应将动画中的位移、旋转或缩放操作改为使用 transform 属性。例如，将 `width` 或 `left` 的变化改为 `transform: translateX(...)`，将 `rotate` 或 `scale` 的变化直接使用 `transform: rotate(...) scale(...)`。通过这种方式，动画将仅在合成阶段进行，不会占用主线程资源，从而避免卡顿现象。
验证动画性能的复现步骤
要验证动画是否使用了 transform 属性并避免了重排，可以按照以下步骤进行测试。首先，在移动设备或浏览器的开发者工具中打开动画页面，并启用帧率监控工具。在 Firefox 中，可以通过访问 `about:config` 并设置 `layers.acceleration.draw-fps` 为 `true` 来显示帧率。在 Chrome 或 Safari 中，可以使用内置的性能分析工具查看帧率。
接下来，点击页面上的切换按钮，观察动画从 CSS 动画切换到 JavaScript 动画时的帧率变化。如果动画使用了 transform 属性，帧率应保持稳定且较高。如果动画使用了触发重排的属性，帧率可能会明显下降。通过对比两种动画方式的帧率，可以确认 transform 属性是否有效避免了重排，从而提升了动画性能。
判断结果与后续优化建议
如果帧率稳定且较高，说明动画使用了 transform 属性并成功避免了重排，性能优化有效。如果帧率下降，说明动画可能使用了触发重排的属性，需要进一步调整。此时，应检查动画代码，将所有触发重排的属性替换为 transform 属性。此外，还可以考虑启用 Off Main Thread Animation（OMTA）功能，进一步将动画移出主线程，提升性能。
除了使用 transform 属性，还可以结合其他优化手段，如减少动画元素的数量或简化动画逻辑。如果动画非常复杂，可能需要依赖 JavaScript 动画库，但应确保这些库也尽量使用 transform 属性。通过持续监控帧率和性能指标，可以确保移动端动画在各种设备上都能流畅运行，提升用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。