# 常用属性动画

URL: https://caijiao.org/animejs/2-basics/2-properties
Source: docs/animejs/2-basics/2-properties.md
Description: 本节介绍 Anime.js 中最常用的动画属性，包括位移、缩放、旋转、透明度、颜色等，帮助开发者快速掌握实际动画制作中的常见属性及应用技巧。

Anime.js 支持多种动画属性，涵盖几何变换、颜色变化及样式控制，以下是最常用的属性示例。

## 位移（translateX / translateY）

```js
anime({
  targets: ".box",
  translateX: 250,
  duration: 1000,
  easing: "easeInOutQuad",
});
```

## 缩放（scale）

```js
anime({
  targets: ".box",
  scale: 1.5,
  duration: 1000,
});
```

## 旋转（rotate）

```js
anime({
  targets: ".box",
  rotate: "1turn",
  duration: 1000,
});
```

## 透明度（opacity）

```js
anime({
  targets: ".box",
  opacity: 0.5,
  duration: 1000,
});
```

## 颜色（color / backgroundColor）

```js
anime({
  targets: ".box",
  backgroundColor: "#FF0000",
  color: "#FFFFFF",
  duration: 1000,
});
```

## 其他支持属性

- 边框圆角（borderRadius）
- 宽高（width / height）
- 滤镜（filter，如 blur）

## 小结

熟练掌握这些常用属性，可以实现丰富的动画效果，提升用户体验。

## 示例演示

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