Question

我定义了这样的动画：

@-webkit-keyframes pan {
    from {left: 10%;}
    to {left: 20%;}

}

#dot {
    background: black;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 20%;
    border-radius: 100%;
    -webkit-animation: pan 10s linear infinite;
}

body.fast > #dot {
    -webkit-animation: pan 1s linear infinite;
}

当我使用这样的JavaScript来改变#dot的类时：

document.body.classList.add('fast');

什么都没发生！什么在这里？

示例：http://jsbin.com/buqowizi/2

Answer 1

specification for css animations州：

动画开始后，一直持续到动画结束或动画名称被删除

因此，动画时间为“无限”，一旦启动而无法修改动画名称，则无法修改。

这是一个jsfiddle来证明速度的变化（尽管它不顺畅，可能有一个更合适的解决方案），前提是：

div.reset {
    -webkit-animation: none; # <-
}
div.slow {
    -webkit-animation: pan 10s linear infinite;
}
div.fast {
    -webkit-animation: pan 1s linear infinite;
}

更改元素的类以便动画重置，然后启动具有不同持续时间的新动画。

Answer 2

仅足以指定持续时间：

-webkit-animation-duration: 1s;

这个javascript代码应该可以工作：

var dot = document.getElementById('dot');
var fast = false;

speed.addEventListener('change', function(e){
  if(!fast) {
      dot.classList.add('fast');
      fast = !fast;
  } else {
      dot.classList.remove('fast');
      fast = !fast;
  }
});

Demo

Answer 3

这里是一个jsbin：http://jsbin.com/buqowizi/6/edit?html,css,js,output

我修改了css，html和javascript以使其正常工作。你的代码有点儿错误

为什么我不能通过添加类来改变CSS动画的速度？

3 个答案: