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属性设置动画＆＃34; backgroundColor＆＃34;，

正确的代码应该是：

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

JS Animate两个属性（！JQ）

1 个答案: