@property --p {syntax: "<percentage>";inherits: true;initial-value: 0%}
.container {
  display: inline-grid;
}

.container img {
  --s: 85px; /* image size */
  
  width: var(--s);
  grid-area: 1/1;  
  border: 2px solid;
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  animation: move 200s linear infinite 3s;
}
@keyframes move {
  to {--p: 1200%}
}
/* up to 7 images (1 + 6)*/
.container img:nth-child(n + 2) {
  offset: circle(calc(1.15*var(--s))) calc(100%*sibling-index()/6 + var(--p)) 0deg;
  transition: 1s 1.5s;
}
/* up to 19 images (1 + 6 + 12) */
.container img:nth-child(n + 8) {
  offset: circle(calc(2.2*var(--s))) calc(100%*sibling-index()/12 - var(--p)/2) 0deg;
  transition: 1s 1s;
}
/* up to 37 images (1 + 6 + 12 + 18) */
.container img:nth-child(n + 20) {
  offset: circle(calc(3.3*var(--s))) calc(100%*sibling-index()/18 + var(--p)/3) 0deg;
  transition: 1s .5s;
}
/* up to 61 images (1 + 6 + 12 + 18 + 24) */
.container img:nth-child(n + 38) {
  offset: circle(calc(4.4*var(--s))) calc(100%*sibling-index()/24 - var(--p)/4) 0deg;
  transition: 1s;
}
/* I got lazy doing the math so we have some magic numbers that you can edit to see what happens */

.container img:nth-child(n + 1) {
  @starting-style {
    offset-path: circle(0);
  }
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #d3d9b3;
}