CSS 动画效果不理想

Question

.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;
    }
}

<div class="square3"></div>

查看这支笔以了解它的全部内容This is the pen.

我希望 box/div 向右移动然后返回其正常状态，我尝试对 left 使用转换属性但它仍然无法正常工作

Answer 1

请使用百分比并如下设置关键帧。

.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{
  0%   {left: 0px;}
  50%  {left: 100px;}
  100%  {left: 0px;}
}

        <div class="square3"></div>

CSS 动画效果不理想

CSS animation is not working as i want it

html

css

animation