<div class="anime">
    <div class="anime-item-1"></div>
    <div class="anime-item-2"></div>
    <div class="anime-item-3"></div>
    <div class="anime-item-4"></div>
  </div>

    @keyframes anime {
      0% {
        --animation-query: 1;
      }
      33% {
        --animation-query: 2;
      }
      66% {
        --animation-query: 3;
      }
      100% {
        --animation-query: 4;
      }
    }

    .anime {
      container-name: anime;
      display: flex;
      gap: 1em;
      animation: anime 4s linear 0.3s infinite;
    }
    [class*=anime-item] {
      --i: 1;
      --color-hue: calc(var(--i) * 25);
      width: 48px;
      aspect-ratio: 1;
      background: lch(78 65 var(--color-hue));
      transition: translate 0.2s ease-out;
    }
    .anime-item-2 {
      --i: 2;
    }
    .anime-item-3 {
      --i: 3;
    }
    .anime-item-4 {
      --i: 4;
    }

    @container anime style(--animation-query: 2) or style(--animation-query: 3) {
      .anime-item-2 {
        translate: 0 64px;
      }
      .anime-item-3 {
        translate: -64px 0;
      }
    }
    @container anime style(--animation-query: 3) {
      .anime-item-1 {
        translate: 0 64px;
      }
      .anime-item-4 {
        translate: -192px 0;
      }
    }