CSS animation is not working as i want it-CodePudding

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

View this pen to see what it's all about This is the pen.

I want the box/div to shift to the right then come back to its normal state and I tried using transition property for the left but still it's not working as I want it to.

CodePudding user response：

Please use percentage and set keyframes as below.

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