使用CSS转换属性时的jQuery动画断断续续

Question

除了我添加main-content属性以使transform div居中时，main-content div内的动画口吃以外，所有内容几乎都能按预期工作。当我保留所有变换属性时，它不会结巴。

CSS：

.main-content {
  position: absolute;
  top: 45%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

main-content div内的动画代码

  setTimeout(function() {
    $('.welcome').fadeIn({queue: false, duration: 600});
    $('.welcome').animate({top: "0px"}, 'slow');
  }, 700);

对此问题有解决方案吗？

谢谢