CSS only - Make an animation happen in 3 steps-CodePudding

Code sandbox link: I tried using steps(3) steps(3,end) but none of that is working:

.Spinner {
  height: 100vh;
  width: 100vw;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.DotLoader {
  display: flex;
  flex-direction: row;
  column-gap: 0.5rem;
  position: relative;
}

.DotLoader section {
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #e5e4e5;
}

.DotLoader div {
  position: absolute;
  height: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: pink;
  left: 3rem;
  animation: moveSpinner 1s steps(3, end) infinite;
}

@keyframes moveSpinner {
  0% {
    left: 0;
  }
  50% {
    left: 1.5rem;
  }
  100% {
    left: 3rem;
  }
}

<div >
  <div >
    <div></div>
    <section></section>
    <section></section>
    <section></section>
  </div>
</div>

Can someone help me understand this and fix it?

CodePudding user response：

.DotLoader div {
   animation: moveSpinner 1s steps(3) infinite;
}

@keyframes moveSpinner {
  0% {
    left: 0;
  }
  100% {
    left: 112%;
  }
}

CodePudding user response：

From what I understand... If you want to make the pink circle "move and stop" on each gray circles, you can simply delete steps(3, end). There is no need for it it just smoothly slides from one dot to another.

But if the request is making pink one just jump instead of slide, then you do not need another <div> for that, just create animations for your <section> elements individually. Light them up as pink and make them gray again.