Der Schlüssel zum Erstellen von Animationseffekten mit Interlaced ist die Verwendung von Animation-Delay mit: N-Child () oder CSS-benutzerdefinierten Attributen, um eine sequentielle Verz?gerungswiedergabe von Elementen zu erzielen. 1. Verwenden: n-Child (), um inkrementelle Animations-Delay-Werte für jedes Listenelement manuell festzulegen, um die Eingabe von einzeln zu erreichen. 2. Verwenden Sie die benutzerdefinierten CSS -Attribute wie -I und -Delay, um die Latenz in HTML dynamisch zu steuern, um die Wartbarkeit zu verbessern. 3.. Umgekehrte Interlacing -Effekte k?nnen durch Calc () dynamisch berechnet werden; 4. Es wird empfohlen, die Verz?gerungskontrolle zwischen 0,1 und 0,2s zu betr?gt. Verwenden Sie Vorw?rts, um den endgültigen Zustand aufrechtzuerhalten und die Transformation oder die Opazit?t zu verwenden, um die visuellen Effekte zu verbessern. Diese Methode eignet sich für reaktionsschnelles Design und ist leicht zu erweitern.

Das Erstellen eines gestaffelten Animationseffekts mit CSS bedeutet, mehrere Elemente nach Abfolge mit einer leichten Verz?gerung zwischen den einzelnen zu beleben - wie eine Welle oder einen Ripple -Effekt. Dies wird üblicherweise für animierte Listen, Heldenabschnitte oder Ladesequenzen verwendet. Hier erfahren Sie, wie Sie es sauber und effektiv machen k?nnen.

? Verwenden Sie animation-delay mit :nth-child() oder CSS-benutzerdefinierten Eigenschaften

Der Schlüssel zu einem gestaffelten Effekt ist die Anwendung derselben Animation auf mehrere Elemente, aber die Startzeit mithilfe von animation-delay ausgleichen. Sie k?nnen dies manuell mit :nth-child() oder dynamisch unter Verwendung von CSS-benutzerdefinierten Eigenschaften (Variablen) tun.

Methode 1: Manuelle Verz?gerungen mit :nth-child()

Angenommen, Sie haben eine Liste von Elementen:

 <ul class = "Staggerlist">
  <li> Artikel 1 </li>
  <li> Artikel 2 </li>
  <li> Punkt 3 </li>
  <li> Artikel 4 </li>
  <li> Artikel 5 </li>
</ul>

Wenden Sie eine Fade-In-Animation mit zunehmenden Verz?gerungen an:

 @keyframes fadein {
  aus {
    Deckkraft: 0;
    Transformation: Translatey (10px);
  }
  Zu {
    Deckkraft: 1;
    Transformation: Translatey (0);
  }
}

.Stagger-list li {
  Deckkraft: 0;
  Animation: Fadein 0,5s leichter nach vorne;
}

.Stagger-list li: n-Kind (1) {Animation-Delay: 0,1s; }
.Stagger-list li: nth-Kind (2) {Animation-Delay: 0,2s; }
.Stagger-list li: n-Kind (3) {Animation-Delay: 0,3s; }
.Stagger-list li: nth-Kind (4) {Animation-Delay: 0,4s; }
.Stagger-list li: nth-Kind (5) {Animation-Delay: 0,5s; }

Dies gibt jedem Artikel eine zunehmend l?ngere Verz?gerung und führt zu einem sauberen, gestaffelten Eingang.

? Sie k?nnen transform für dynamische Effekte wie Skalierung oder Rutschen verwenden.

? Methode 2: Dynamische Staffelung mit CSS -benutzerdefinierten Eigenschaften

Für mehr Flexibilit?t (insbesondere bei vielen Elementen) verwenden Sie eine CSS -Variable, um die Verz?gerung zu berechnen:

 .Stagger-list li {
  -Delay: Calc (var (-i, 1) * 0,1s);
  Deckkraft: 0;
  Animation: Fadein 0,5s leichter vorw?rts var (-Verz?gerung);
}

Dann setzen Sie --i auf jedes <li> in HTML:

 <li style = "-i: 1"> Artikel 1 </li>
<li style = "-i: 2"> Artikel 2 </li>
<li style = "-i: 3"> Artikel 3 </li>
<li style = "-i: 4"> Artikel 4 </li>
<li style = "-i: 5"> Artikel 5 </li>

Jetzt k?nnen Sie einfach den Zeitmultiplist ?ndern oder das Muster an anderer Stelle wiederverwenden.

?? Pro -Tipps

<li> Halten Sie die Verz?gerung subtil : 0,1 bis 0,2s zwischen den Gegenst?nden sehen normalerweise reibungslos aus.<li> Verwenden Sie forwards im animation-fill-mode damit Elemente nach der Animation sichtbar bleiben.<li> Kombinieren Sie mit opacity , transform oder sogar clip-path für kreative Effekte.<li> Erw?gen Sie bei reaktionsschnellen Layouts die Verringerung der Verz?gerung auf dem Mobiltelefon, um lange Warten zu vermeiden.

? Bonus: Umgekehrter Staffelung (zuletzt zuerst)

Wechseln Sie die Reihenfolge um, indem Sie vom Ende berechnet:

 .Stagger-list li {
  -Total: 5; / * Gesamtartikel */
  -Reverse-Delay: Calc ((var (-insgesamt)-var (-i)) * 0,1s);
  Animation: Fadein 0,5s Leichter vorw?rts var (-umgekehrtes Delay);
}

Jetzt animiert der letzte Element zuerst.

Grunds?tzlich sind gestaffelte Animationen nur das kontrollierte Timing . Unabh?ngig davon, ob Sie :nth-child() oder CSS-Variablen verwenden, ist die Idee dieselbe: Setzen Sie jede Animation geringfügig aus . Die zweite Methode skaliert besser und ist einfacher in dynamischem Inhalt zu verwalten.

Nicht kompliziert - achten Sie einfach auf das Timing und lockern, um es reibungslos zu halten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen gestaffelten Animationseffekt mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!