可动画的目标属性

CSS 属性

对目标的CSS属性进行动画。

大多数CSS属性都会导致布局更改或重新绘制，并会导致动画不稳定。 因此尽可能优先考虑opacity和CSS transforms。

可接受的数值设置信息可查看动画赋值部分。

anime({
  targets: '.css-prop-demo .el',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad'
});

CSS3 transforms 属性

对CSS的transforms属性动画。

可以为每个变换属性指定不同的排序，具体可查看特殊属性 部分。

可接受的数值设置信息可查看动画赋值部分。

anime({
  targets: '.css-transforms-demo .el',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

Javascript对象属性

包含数值的任何Object属性都可以设置动画。

可接受的数值设置信息可查看动画赋值部分。

var objPropLogEl = document.querySelector('.js-object-log');

var myObject = {
  prop1: 0,
  prop2: '0%'
}

anime({
  targets: myObject,
  prop1: 50,
  prop2: '100%',
  easing: 'linear',
  round: 1,
  update: function() {
    objPropLogEl.innerHTML = JSON.stringify(myObject);
  }
});

DOM 属性

任何包含数值的DOM属性都可以设置动画。

可接受的数值设置信息可查看动画赋值部分。

anime({
  targets: '.dom-attribute-demo input',
  value: [0, 1000],
  round: 1,
  easing: 'easeInOutExpo'
});

SVG 属性

与任何其他DOM属性一样，包含至少一个数值的所有SVG属性都可以设置动画。

可接受的数值设置信息可查看动画赋值部分。 SVG 动画可查看SVG 部分。

anime({
  targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap'],
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  baseFrequency: 0,
  scale: 1,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutExpo'
});