CSS анимация: слева и справа?

Question

Я пытаюсь создать анимацию, которая выдвигается в левой части страницы, а затем возвращается в правую часть и продолжается таким же образом, как в цикле. Все, что у меня есть, это код ниже, и я не уверен, как создать то, что я пытаюсь сделать. Помощь будет очень полезна!

section {
    position: absolute;
    animation:linear infinite alternate;
    animation-name: run;
    animation-duration: 5s;
}     
  
@keyframes run {
        0% { left: 0;}
        50%{ left : 100%;}
        100%{ left: 0;}
    }

Answer 1

Как насчет этого?

@keyframes run {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100vw);
  }
  50.000001% {
    transform: translateX(100vw);
  }
}

.circle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}

<div class="circle"></div>

Answer 2

Вы почти хороши, просто установите left:100% в окончательное состояние и добавьте перевод в начале, который скроет ваш элемент в исходном состоянии:

.box {
  position: absolute;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 2s;
  background:red;
  width:50px;
  height:50px;
}

@keyframes run {
  0% {
    left: 0;
    transform:translateX(-100%);
  }
  100% {
    left: 100%;
  }
}
body {
  margin:0;
  overflow:hidden;
}

<div class="box"> </div>

Answer 3

Вы также можете сделать это с двумя элементами, один из которых начинается на экране, а другой начинается за пределами экрана:

    body{
overflow:hidden;
}

div{
width:100px;
height:100px;
border:3px solid red;
  position:absolute;
 animation:move 2s linear infinite forwards;

}

div:first-of-type{
   top:calc(50% - 50px);
  left:calc(50% - 50px);
}
div:last-of-type{
   top:calc(50% - 50px);
  left:calc(150% - 50px);
}

@keyframes move{
  from{
    transform:translateX(0)
  }
  to{
    transform:translateX(-100vw)
  }
}