使用@keyframes与relative/absolute定位的CSS动画无法生效如何解决？

• 核心问题是你在@keyframes中混用了两个独立的定位属性定义过渡帧：0%关键帧设置的是left: 0px，100%关键帧设置的却是right: 0px。CSS动画要求过渡必须是同一个CSS属性的数值变化才能正常做插值计算，浏览器无法自动在left和right两个互不关联的属性之间计算平滑过渡的中间值，因此定位方式的动画无法达到预期效果。
• 如果你要使用定位属性实现动画，将100%关键帧的属性也改为left即可，注意要减去正方形自身的宽度避免溢出父容器，修正后的动画规则如下：

@keyframes left-right {
  0% {
    top: 0px;
    left: 0px;
  }
  100% {
    top: 0px;
    left: calc(100% - 100px);
  }
}

• transform方案可以正常运行的原因：transform: translateX()属于同一个CSS属性的数值变化，浏览器可以直接对X轴偏移的数值做平滑插值计算，因此动画效果正常。同时transform动画默认走GPU加速，不会触发页面重排，性能比修改定位属性的方案更好，更推荐用于动效开发。

内容的提问来源于stack exchange，提问作者Egor Ulybin