Question

CSS 属性

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

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

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

Example	value
opacity	.5
left	'100px'

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

CSS3 transforms 属性

对CSS的transforms属性动画。

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

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

Valid properties	Default unit
'translateX'	'px'
'translateY'	'px'
'translateZ'	'px'
'rotate'	'deg'
'rotateX'	'deg'
'rotateY'	'deg'
'rotateZ'	'deg'
'scale'	—
'scaleX'	—
'scaleY'	—
'scaleZ'	—
'skew'	'deg'
'skewX'	'deg'
'skewY'	'deg'
'perspective'	'px'

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

Javascript对象属性

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

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

Example	value
prop1	50
'prop2'	'100%'

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属性都可以设置动画。

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

Example	value
value	1000
volume	0
data-custom	'3 dogs'

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

SVG 属性

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

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

Example	value
points	'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'
scale	1
baseFrequency	0

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'
});