常用属性动画

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

位移（translateX / translateY）

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

缩放（scale）

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

旋转（rotate）

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

透明度（opacity）

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

颜色（color / backgroundColor）

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

其他支持属性

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

小结

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

示例演示

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