常用属性动画

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）

小结

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

示例演示

loading