移除wiggle类并添加right类时，CSS动画与过渡衔接问题咨询

先还原你的场景代码：

<div class="outer">
  <div class="inner wiggle"></div>
</div>

@keyframes wiggle {
  from { left: 10%; }
  50% { left: 30%; }
  to { left: 10%; }
}
.inner {
  left: 0;
  &.wiggle { animation: wiggle 2s infinite; }
  &.right { left: 90%; transition: left 2s; }
}

当你同时移除wiggle类并添加right类时，元素的表现可以拆成两步来看：

• 动画立刻终止，元素定格在动画当前执行的位置
  移除wiggle类的瞬间，浏览器会直接停止动画的执行，不会等待动画完成当前循环。元素的left值会直接跳转到动画运行到那一瞬间的帧位置——比如如果动画刚执行到50%的节点，元素就会停在left:30%；如果刚好在动画的起始/结束帧，就会停在left:10%。

• 从动画终止位置开始，触发到left:90%的平滑过渡
  因为right类给元素设置了left:90%和transition: left 2s规则，浏览器会以动画终止时的left值为起始点，用2秒的时间平滑过渡到90%的位置，而不是直接跳转。

简单来说，就是动画中途“刹车”，然后从刹车的位置慢慢滑到目标点，整个过程是连贯的，不会有突兀的跳转。

内容的提问来源于stack exchange，提问作者Cedric Reichenbach