css3动画能通过javascript控制变速播放吗？

Question

需求：

我有一段10s的动画，内容是使一个小球由0运动到1000的位置，
在0-10s之内的某秒，点击一下小球，
使得剩下的动画内容以原来速度的2倍播放；

需求解释：

比如，小球运动了5s，既运动到了500的位置，然后我点击了一下小球；
剩下的500距离我希望2.5s播放完成；

问题：

单纯靠css3动画+js控制能否实现，应该查哪个api？
不考虑canvas，因为canvas有尺寸限制；
另我已知gsap能够通过timelite实现，所以仅限探讨css3的控制；

Answer 1

try transformjs

like this
demo

Answer 2

animation 是一个css属性，当然可以用js控制了。

animation 和transtion一样，内有多个属性，例如 animation-name, duration等等。

例如改变animation动画名：

document.getElementById('#id').style.animationName = 'newName';

这种需求感觉改变animation name比较简单。

不过js里面好像很多浏览器要加前缀，你去caniuse查一下。

Answer 3

可行的。

这个效果？
https://jsfiddle.net/5m24vL98/

Answer 4

可以用js控制 看看animation中的内容 对你有帮助

Answer 5

获取到style标签里的内容,设置一个新的keyframes,这个left是当前点击的时候的对象的left值.
之后再将设置新的animation值,代码看链接吧
动画

Answer 6

http://alloyteam.github.io/Al...

Answer 7

function transform(el,v,start,end){
    el.trans = {
        v:v,
        start:start,
        now:"",
        stop:""
    }
    var i=0;
    var num = 100;
    //计算定时器间隔
    var time = (end-start)/(v*num);
    var el.stop = setIntervel(function(){
        i++;
        //当前设置位置
        now = i*time;
        if(now>=end){
        now = end
        setInterval(el.stop)
        }
        el.style.transform ="translateX"+ now+"px";
        el.now = now;
    },time)
}
el.onclick = function(){
     setInterval(el.stop);
     transform(el,v/2,el.now,end){    
}

大概是这么个思路吧。有问题你调一下。过渡过程有卡顿用3d加transition