重新调整动画链中的转换速度

Question

以下代码（1）向下和向左移动图像，（2）将图像向下旋转180度，（3）然后将其在屏幕上向右冲击。

jsFiddle here

请注意，旋转对象时动画转换速度会变慢，因此它似乎转动而不仅仅是翻转。

问题在于，这导致动画的第3部分也变得非常缓慢......不再是爆炸，更像是莫斯。

$('.moving_image').delay(7000).animate({
    'left' : '18%',
    'top' : '55%',
    'width': '5vw'
},5500,function(){
        $('.moving_image').css({'transform':'rotateY(180deg)','transition-duration':'2s'});
        $('.moving_image').delay(2000).css({'transition-duration':'0s'}).animate({
            'left' : '101%',
            'top'  : '50%',
            'width': '15vw'
        },200,'easeInExpo')
});

注意在第7行重新调整动画速度的尝试失败，添加了此片段：

.delay(2000).css({'transition-duration':'0s'})

可悲的是，它只是否定了之前的2s减速。

Answer 1

您可以使用其他animate功能更改transition-duration： http://jsfiddle.net/mpsyLooo/4/

顺便说一句，我真的推荐TimelineMax或CSS3 keyframes这样的动画。