Loop a sequence of css animation

Question

I have the following code:

@keyframes ball1 {
  0% {
    transform: translateX(0px);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: translateX(120px);
    opacity: 0%;
  }
}

@keyframes ball2 {
  0% {
    transform: translateX(0px);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: translateX(160px);
    opacity: 0%;
  }
}

@keyframes ball3 {
  0% {
    transform: translateX(0px);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: translateX(200px);
    opacity: 0%;
  }
}

@keyframes ball4 {
  0% {
    transform: translateX(0px);
    opacity: 0%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: translateX(240px);
    opacity: 0%;
  }
}

.ball {
  background: black;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 10px;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

#ball-1 {
  animation-name: ball1;
}

#ball-2 {
  animation-name: ball2;
  animation-delay: 1s;
}

#ball-3 {
  animation-name: ball3;
  animation-delay: 2s;
}

#ball-4 {
  animation-name: ball4;
  animation-delay: 3s;
}

<div class="ball" id="ball-1"></div>

<div class="ball" id="ball-2"></div>

<div class="ball" id="ball-3"></div>

<div class="ball" id="ball-4"></div>

I want to achieve to follow:

Sequence starts
Ball 1 animates once.
There is a delay of 1 second.
Ball 2 animates once.
There is a delay of 1 second.
Ball 3 animates once.
There is a delay of 1 second.
Ball 4 animates once.
There is a delay of 1 second.
The sequence restarts from step 1.

This is what I currently have, but I don't know how to loop this sequence, it only plays ones. Not sure if it's possible with only css. If not I'm fine with JS as well.

Example: https://jsfiddle.net/patxh1gn/

Thomas · Accepted Answer · 2023-01-03 05:16:47Z

1

do you mean something like this?

@keyframes ball1 {
  0%,
  12.501% {
    transform: translateX(0px);
    opacity: 0%;
  }
  6.25%,
  12.502%,
  100% {
    opacity: 100%;
  }
  12.5% {
    transform: translateX(var(--right));
    opacity: 0%;
  }
}

.ball {
  background: black;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  margin: 10px;
  animation: ball1 8s infinite;
}

#ball-1 {
  --right: 120px;
}

#ball-2 {
  --right: 160px;
  animation-delay: 2s;
}

#ball-3 {
  --right: 200px;
  animation-delay: 4s;
}

#ball-4 {
  --right: 240px;
  animation-delay: 6s;
}

<div class="ball" id="ball-1"></div>

<div class="ball" id="ball-2"></div>

<div class="ball" id="ball-3"></div>

<div class="ball" id="ball-4"></div>

answered Jan 3, 2023 at 5:16

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coce Over a year ago

exactly like this, thank you so much!

coce Over a year ago

tried to create something based on this, now I have different elements moving on different axis. here's the example: jsfiddle.net/px49tw28 I want to animate through first to fourth with delays, then start the sequence once the fourth is finished. Any way you could help? I'm a bit lost with keyframes. Thank you!

Collectives™ on Stack Overflow

Loop a sequence of css animation

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related