Javascript CSS动画向前然后向后闪烁

我试图创建一个CSS动画，当用户单击一个元素时，它会向右动画，然后当他们再次单击它时，它会向左动画。我的问题是它引入了闪烁。我知道原因，但我不确定最好的解决办法。我想要这个问题最优雅的解决方案

我在这里设置了一个JSFIDLE（仅限WebKit）：

CSS：

.animateRight{
    -webkit-animation: goRightLeft 1s;
    -webkit-animation-fill-mode: forwards;
}
.animateLeft{
    -webkit-animation: goRightLeft 1s;
    -webkit-animation-fill-mode: backwards;
    -webkit-animation-direction: reverse;    
}
@-webkit-keyframes goRightLeft {
    0%{margin-left: 0px;}
    100%{margin-left: 100px;}
}

JavaScript：

this.animateBox = function(className){
    var box = document.getElementsByClassName('box')[0];
    box.className = "box";
    setTimeout(function(){
        box.className = "box " + className;
    },1);
};

当您单击右侧动画时，它将按预期工作，但当您单击左侧动画时，它将向左闪烁，然后按预期设置动画。原因是为了让动画再次运行，您必须删除该类并添加另一个类，但我不知道使其工作的最佳方法。我想我可以在删除前一个动画时添加一个类，但在我看来这是错误的

谢谢你的帮助

闪烁的原因：

在设置下一个动画类之前，您正在单击应用类

box

，该类会使长方体突然向左移动。然后应用动画使其反转。因此，当它突然向左移动时，会导致闪烁（删除类）在超时中添加类会导致根据

animateLeft

类中的填充模式和方向对动画进行混响，并使其更加糟糕，因为

goRightLeft

再次添加边距，由于规则和

webkit动画填充模式中的边距，将其向右拉：向后向左推。因此，我在这里提到的一种方法是反向（增加/减少）保证金

这里有一个解决方案：

对于真正的反向动画，您需要应用从100px递减到0的边距，就像您在正向动画中所做的那样。因此，只需为
LeftToRight
添加
关键帧
，并将其应用于动画

Css
剧本
嗯，这确实管用。我一直在jQuery中使用add/removeClass，这就是为什么我首先使用setTimeout和removing。我只是把它挂起来准备演示。我对不使用jQuery很满意，所以这对我来说是一个很好的解决方案。不过，我对如何在jQuery中最好地实现它感兴趣（不使用.animate）。谢谢@马特：你是说不使用像现在这样的特定css规则和jquery动画方法吗？
.animateRight{
    -webkit-animation: goRightLeft 1s;
    -webkit-animation-fill-mode: forwards;
}
.animateLeft{
    -webkit-animation: goLeftRight 1s; /* Note the goLeftRight animation */
      -webkit-animation-fill-mode: backwards;


}
@-webkit-keyframes goRightLeft {
    0%{margin-left: 0px;}
    100%{margin-left: 100px;}
}

@-webkit-keyframes goLeftRight { /* Note the new keyframes rule for reverse animation*/
    0%{margin-left: 100px;}
    100%{margin-left: 0px;}
}

this.animateBox = function(className){
    var box = document.getElementsByClassName('box')[0];
    box.className = "box " + className;

};