每 2 秒变换一次 translateX 并返回

Question

我想在 css 中每 2 秒转换一次 x 轴四次并回到原始位置。

example gif

1. 如 gif 所示，我想每 2 秒移动点四次，然后返回
2. 重复次数可能不同(4 times may vary)
3. 但动画应该像 gif 一样出现 infinitely
4. 没有幻灯片像动画

我尝试过的：

.carousel__navigation-buttoni {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: white;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;

  /*margin-left: 3.5rem ;*/
  /*transform: translateX(1.75rem);*/
  /*either i want to use margin or transform to move but i dont know how to repeat it in animation*/

  
}
.carousel__navigation-buttonio {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  background-clip: content-box;
  border: 0.25rem solid transparent;
 
  font-size: 0;

}
.carousel__navigation-listi,
.carousel__navigation-itemi {
  display: inline-block;
}
.carousel__navigationi {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
body{
background-color:red;
}

<aside class="carousel__navigationi">
<ol class="carousel__navigation-listi">

  <li class="carousel__navigation-itemi">
    <div class="carousel__navigation-buttoni">white button</div>
  </li>
  <li class="carousel__navigation-itemi">
    <div class="carousel__navigation-buttonio">empty</div>
  </li>
  <li class="carousel__navigation-itemi">
    <div class="carousel__navigation-buttonio">empty</div>
  </li>
  <li class="carousel__navigation-itemi">
    <div class="carousel__navigation-buttonio">empty</div>
  </li>
</ol>
</aside>

Answer 1

检查这段代码，你想要这样吗：

div{
  width:100px;
  height:100px;
  border-radius:50%;
  background:black;
  animation:move 4s steps(4, start) infinite;
 } 
 
 @keyframes move{
 
 0%{
  transform:translateX(0);
 }
  100%{
    transform:translateX(200px)
   }
 }

<div></div>