# 推荐属性与替代方案

URL: https://caijiao.org/animejs/7-tips/4-recommendations
Source: docs/animejs/7-tips/4-recommendations.md
Description: 本节介绍 Anime.js 动画中推荐使用的高性能 CSS 属性及常见低效属性的替代方案，通过对比示例帮助提升动画性能和体验。

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

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

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

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

## 2. 避免使用的低效属性

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

## 3. 替代示例

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

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

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

## 动画对比演示

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

[在线代码演示](/animejs/demos/22.html)