推荐属性与替代方案

动画性能在开发中至关重要。选择合适的 CSS 属性不仅能提升动画流畅度，还能减少页面卡顿。以下为推荐和不推荐使用的属性对比及替代方案。

1. 推荐使用的高性能属性（GPU 加速）

属性	说明
transform	位移（translateX/Y/Z）、缩放（scale）、旋转（rotate）等，利用 GPU 加速
opacity	透明度变化，常用且性能好
filter	部分滤镜效果支持硬件加速

使用这些属性能避免触发布局重排和重绘，提升动画效率。

2. 避免使用的低效属性

属性	问题	替代方案
width、height	修改会触发布局回流，影响性能	使用 scaleX、scaleY 缩放替代
top、left	触发布局变化	使用 translateX、translateY 替代
margin	可能引起布局重绘	使用位移动画替代

3. 替代示例

将宽度变化动画替换为缩放动画，提高性能表现：

// 不推荐（触发布局）
anime({
  targets: ".box",
  width: "200px",
  duration: 1000,
});

// 推荐（GPU 加速）
anime({
  targets: ".box",
  scaleX: 2,
  duration: 1000,
});

动画对比演示

通过下面的示例，可以直观看到使用 transform 和 width 的动画效果差异。

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。