Gestaffelte CSS-Übergänge

Nehmen wir an, Sie möchten ein Element für einen lustigen visuellen Effekt bei :hover bewegen.

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

Kühl, kühl. Aber was, wenn Sie mehrere Listenelemente hätten und diese sich alle beim Hovern bewegen sollten, aber jedes mit einer gestaffelten Zeitverzögerung?

Der Trick liegt in transition-delay und der Anwendung einer leicht unterschiedlichen Verzögerung auf jedes Element. Wählen wir jedes Listenelement einzeln aus und wenden wir unterschiedliche Verzögerungen an. In diesem Fall wählen wir einen internen Span nur zum Spaß aus.

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  .list li:nth-child(1) span {
    transition-delay: 0.0s;
  }
  .list li:nth-child(2) span {
    transition-delay: 0.05s;
  }
  .list li:nth-child(3) span {
    transition-delay: 0.1s;
  }
  .list li:nth-child(4) span {
    transition-delay: 0.15s;
  }
  .list li:nth-child(5) span {
    transition-delay: 0.2s;
  }
  .list li:nth-child(6) span {
    transition-delay: 0.25s;
  }
}

Siehe den Pen
Gestaffelte Animationen von Chris Coyier (@chriscoyier)
auf CodePen.

Wenn Sie sich etwas mehr programmatische Kontrolle verschaffen wollten, könnten Sie die Verzögerung als benutzerdefinierte CSS-Eigenschaft festlegen

@media (hover: hover) {
  .list {
    --delay: 0.05s;
  }
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  .list li:nth-child(1) span {
    transition-delay: calc(var(--delay) * 0);
  }
  .list li:nth-child(2) span {
    transition-delay: calc(var(--delay) * 1);
  }
  .list li:nth-child(3) span {
    transition-delay: calc(var(--delay) * 2);
  }
  .list li:nth-child(4) span {
    transition-delay: calc(var(--delay) * 3);
  }
  .list li:nth-child(5) span {
    transition-delay: calc(var(--delay) * 4);
  }
  .list li:nth-child(6) span {
    transition-delay: calc(var(--delay) * 5);
  }
}

Das könnte Ihnen vielleicht ein wenig zu heikel sein. Sagen wir, Ihre Liste beginnt zu wachsen, vielleicht auf sieben oder mehr Elemente. Das Staffeln funktioniert plötzlich nicht mehr bei den neuen Elementen, da dies nicht ausreicht, um so viele Listenelemente zu berücksichtigen.

Sie könnten die Verzögerung von HTML übergeben, wenn Sie wollten

<ul class="list">
  <li><a href="#0" style="--delay: 0.00s;">① <span>This</span></a></li>
  <li><a href="#0" style="--delay: 0.05s;">② <span>Little</span></a></li>
  <li><a href="#0" style="--delay: 0.10s;">③ <span>Piggy</span></a></li>
  <li><a href="#0" style="--delay: 0.15s;">④ <span>Went</span></a></li>
  <li><a href="#0" style="--delay: 0.20s;">⑤ <span>To</span></a></li>
  <li><a href="#0" style="--delay: 0.25s;">⑥ <span>Market</span></a></li>
</ul>

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
    transition-delay: var(--delay); /* comes from HTML */
  }
}

Oder, wenn Sie Sass-affin sind, könnten Sie eine Schleife mit mehr Elementen erstellen, als Sie gerade benötigen (wissend, dass der zusätzliche Code ziemlich effizient komprimiert wird)

@media (hover: hover) {
 
 /* base hover styles from above */

  @for $i from 0 through 20 {
    .list li:nth-child(#{$i + 1}) span {
      transition-delay: 0.05s * $i;
    }
  }
}

Das könnte nützlich sein, ob Sie nun für mehr als nötig schleifen oder nicht.