Transform translateX every 2 second &come back

byMR

January 23, 2022

I want to transform translate x axis every 2 second for four times and come back to original position, in css.

example gif

as shown in gif I want to move the dot every 2 second for four times and come back
the repeating times may vary(4 times may vary)
but the animation should occur infinitely just like a gif
no slide like animation

what I have tried:

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

>Solution :

check this code, do you want like this:

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)
   }
 }