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

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

try transformjs

like this
demo

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

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

例如改变animation动画名：

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

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

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

可行的。

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

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

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