每 2 秒转换一次 translateX 并返回

Question

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

如图gif我想每2秒移动一次点，连续四次然后回来
重复次数可能不同(4 times may vary)
但是动画应该 infinitely 就像 gif 一样
没有像滑动一样动画

我尝试过的：

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

每 2 秒转换一次 translateX 并返回

Transform translateX every 2 second &come back

html

css

animation

css-animations

css-transforms