Перестроить скорость перехода в цепочке анимации

Question

Следующий код (1) перемещает изображение вниз и влево, (2) поворачивает его на 180 градусов, (3) затем разрывает его по экрану вправо.

jsFiddle here

Обратите внимание, что скорость анимации перехода замедляется, когда объект вращается, так что, как представляется, поворот и не только переворачивать.

Проблема заключается в том, что это приводит к тому, что третья часть анимации также идет очень медленно ... больше не взрыв, скорее как mosey.

$('.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 к анимации, как это.