问jquery动画与css动画之间的滞后

EN

var i = 1;

  function AnimateRotate(angle,elem) {
    $({deg: 0}).animate({deg: angle}, {
      duration: 700,
      step: function(now) {
        elem.css({
        transform: 'rotate(' + now + 'deg)'
      });
    }
    });
  }

function swypeStyle(){
  var imageLength = $('.my-image').length;

  $('.my-image').each(function(){
      $(this).css({
        "left": 0,
        "top": 0,
        "opacity": 1,
        WebkitTransform: 'rotate(0deg)',
        '-moz-transform': 'rotate(0deg)'
      })
    });

    AnimateRotate("-30",$("#image"+i));

    $("#image"+i).animate({
      "left": "-150px",
      "top": "25px",
      "opacity": 0
    },700); 

  setTimeout(function(){
    for(var j = 1; j <= imageLength; j++){

      var currentZindex = $('#image'+j).css('z-index');

      if(currentZindex == imageLength){
        currentZindex = 1;
      }else{
        currentZindex++;
      }

      $('#image'+j).css('z-index',currentZindex);
    }
  }, 1100);


  if(i == imageLength){
    i = 1;
  }else{
    i++;
  }
}

window.setInterval(function () {
	swypeStyle(); 
}, 3000);

.my-image{
	width: 144px;
	left: 0px;
	top: 0px;
	position: absolute;
}

<img src="https://www.otop.sg/retailer/images/image1.jpg" class="my-image" id="image1" style="z-index: 5;">
<img src="https://www.otop.sg/retailer/images/image2.jpg" class="my-image" id="image2" style="z-index: 4;">
<img src="https://www.otop.sg/retailer/images/image3.jpg" class="my-image" id="image3" style="z-index: 3;">
<img src="https://www.otop.sg/retailer/images/image4.jpg" class="my-image" id="image4" style="z-index: 2;">
<img src="https://www.otop.sg/retailer/images/image5.jpg" class="my-image" id="image5" style="z-index: 1;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// Get element.
const elem = document.querySelector( '#elementID' )
// Get current size.
const startSize = elem.width
// Set end size.
const endSize = startSize * 2 // Double the size of the element.
// Set animation duration.
const duration = 1000 // 1000ms -> 1s

animate( ratio => {
  setWidth( elem, lerp( startSize, endSize, ratio ))
}, duration )

// Resolves a promise once an animation is complete.
// Allows you to specify an animation duration, start and end values,
// and automatically handles frame interpolation.
function animate( callback, duration ) {
  return new Promise( resolve => {
    let
      // Amount of time in ms since last frame
      delta = 0,
      // Used to calculate delta
      lastTimestamp = 0,
      // Ratio for use in linear interpolation.
      // Passed through to the callback and incremented
      // with respect to duration.
      // The ratio determines how far along the start and end values we are.
      ratio = 0,
      // Speed is an inverse function of time, since ratio is normalized.
      speed = 1 / duration

    // Start the update loop
    update( performance.now())

    // Update loop
    function update( timestamp ) {
      if ( ratio < 1 ) {
        // Calculate frame delta and update last frame's timeStamp.
        // In the first frame, set lastFrame to this frame's timeStamp.
        delta = timestamp - ( lastTimestamp || timestamp )
        lastTimestamp = timestamp
        // Update ratio as a function of speed and frame delta
        ratio = clamp( ratio + ( speed * delta ))
        // Execute callback
        callback( ratio )
        // Request next frame
        requestAnimationFrame( update )
      }
      // Make good on the promise
      else resolve()
    }
  })
}

/** Linear interpolation between two scalars */
function lerp( min, max, t ) {
  /*
   * Get difference, multiply by `t` and add min.
   *
   * The ratio `t` represents the percentage of that distance
   * we add back to min, so that a fraction of 1 adds 100%
   * of the distance, which equals the max value.
   *
   * Precise form of linear interpolation,
   * ensures t=1 always equals max.
   */
  return ( 1 - t ) * min + t * max
}

// Set width of an element
function setWidth( element, width ) {
  element.style.width = `${ width }px` 
}