JavaScript：在1秒内逐渐将CSS属性的值增加100

Question

我有一个属性transform: translateX(0);的元素，translateX()值通过JavaScript点击增加或减少100。我怎样才能使这个值的增加/减少逐渐发生，所以看起来元素正在缓慢移动？

这就是我目前正在改变它的方式：

val = val - 100;
var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;

有问题的元素是scene[0]，并且该值是在attplus变量中生成的。

Answer 1

只需为transition添加两个样式属性，延迟时间为1秒，如下所示：

var attplus = "translateX(+" + val + "%)";
scene[0].style.webkitTransform = attplus;
scene[0].style.WebkitTransition = "all 1s";
scene[0].style.transition = "all 1s";