css translateY动画结束时往左抖动

走马灯(vue)

// 尽量将所有的变化写在transform中，否则样式计算会变复杂，引起抖动
<style>
@keyframes toShow {
  //放大时动画
  from {
    transform: scale(0.8);
    z-index: 2;
  }
  to {
    transform: translateX(120px) scale(1);
  }
}
@keyframes toBg {
  //缩小时动画
  from {
    z-index: 1;
    transform: translateX(120px) scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
.showImg {
  animation: toShow 0.5s ease-out 1;
}
.bgImg {
  animation: toBg 0.5s ease-out 1;
}
</style>
<div :class="index === 0 ? 'showImg img-show' : 'bgImg img-bg'"></div>
<div :class="index === 1 ? 'showImg img-show' : 'bgImg img-bg'"></div>

translateY动画结束后会往左抖动下（未解决）

@keyframes fadeinup {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}
.DH {
  animation: fadeinup 1s 2s infinite;
}

动画测试