重新调整动画链中的过渡速度

Question

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

js小提琴在这里

请注意，当对象旋转时，动画过渡速度会减慢，因此它看起来在转动，而不仅仅是翻转。

问题是这导致动画的第 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关键帧来制作这样的动画。