CSS animation效果不符预期，如何实现元素右移后自动复位循环？

你当前的动画默认单向播放，每次循环时会直接跳回起始位置，没有平滑回退的过渡效果。你添加transition不生效的原因是，transition仅作用于元素属性的状态切换（如hover、类名变更触发的属性变化），@keyframes控制的动画优先级更高，不会受transition影响。

以下是两种可行的解决方案：

方案1：启用alternate动画方向 #

你代码中已经写好了animation-direction: alternate属性，只是被注释了，取消该属性的注释即可。该属性会让动画奇数次正向播放、偶数次反向播放，自然实现移动到终点后平滑退回初始位置的效果。
修改后的核心CSS如下：

.square3 {
  height: 100px;
  width: 200px;
  background-color: #f56d4a;
  margin-bottom: 20px !important;
  position: absolute;
  animation-name: shift;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 0.7s;
  animation-direction: alternate; /* 取消这行的注释 */
  animation-iteration-count: infinite;
}

@keyframes shift{
    from{
        left: 0;
    }to{
        left: 100px;
    }
}

方案2：修改@keyframes规则实现往返 #

如果不想调整动画方向属性，也可以直接修改关键帧规则，把回到初始位置的逻辑加入帧定义中：

@keyframes shift{
    0% {
        left: 0;
    }
    50% {
        left: 100px;
    }
    100% {
        left: 0;
    }
}

这种方案下不需要修改animation-direction属性，动画总时长3s的情况下，前1.5s右移到终点，后1.5s左移回初始位置。

内容的提问来源于stack exchange，提问作者Samuel Emeka