- for (let i = 0; i < 11; ++i)
  div(style={'--num': i}) 😸
View Compiled
div {
  position: absolute;
  font-size: 24px;
  animation-name: move1, move2, move3;
  animation-duration: 2s;
  animation-timing-function: steps(18, end);
  animation-iteration-count: infinite;
  animation-delay: calc(-0.2s * var(--num));
}

@keyframes move1 {
  from { transform: translate3d(50px, 100px, 0); }
  to { transform: translate3d(69px, -562px, 0); }
}
@keyframes move2 {
  to { transform: translate3d(522px, 527px, 0); }
}
@keyframes move3 {
  to { transform: translate3d(30px, 50px, 0); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.