JS为两个属性设置动画(!JQ)

Question

如何在纯JavaScript (无JQuery)中设置两个属性的动画？

这不起作用(只有BG颜色有动画效果)：

element.animate([
  {transform: 'scale(1.6)', backgroundColor: '#FF0000'},
  {transform: 'scale(1)', backgroundColor: '#FFFFFF'}
], {
  duration: 1000,
  steps: 5,
  webkitAnimationTimingFunction: 'ease-out',\
});

只需一种颜色(缩放或bg颜色)即可正常工作

Answer 1

您正在尝试使相同的css属性"backgroundColor“具有动画效果，

正确的代码应该是：

element.animate([
  {cssProperty: value0},
  {cssProperty: value1},
  {cssProperty: value2},
  //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

但不是同一处房产。

来自：https://developers.google.com/web/updates/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36