Gestaffelte Animation

Einführung

In diesem Lab werden wir lernen, wie man mit CSS einen gestaffelten Animationseffekt für eine Liste von Elementen erstellt. Wir werden die opacity- und transform-Eigenschaften verwenden, um die Elemente transparent zu machen und sie bis ganz nach rechts zu bewegen. Anschließend werden wir transition-delay und den :checked-Pseudo-Klassen-Selektor verwenden, um die Elemente in einem gestaffelten Muster erscheinen zu lassen und in den sichtbaren Bereich zu gleiten. Am Ende dieses Labs werden Sie in der Lage sein, visuell ansprechende Animationen für Ihre Webseiten zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

index.html und style.css wurden bereits in der VM bereitgestellt.

Dieser Code erstellt eine gestaffelte Animation für die Elemente einer Liste. Dazu tun Sie Folgendes:

Machen Sie die Listelemente transparent und bewegen Sie sie bis ganz nach rechts, indem Sie opacity: 0 und transform: translateX(100%) einstellen.
Geben Sie für die Listelemente die gleichen transition-Eigenschaften an, außer transition-delay.
Verwenden Sie Inline-Styles, um einen Wert für --i für jedes Listelement anzugeben. Dies wird für transition-delay verwendet, um den Stagger-Effekt zu erzeugen.
Verwenden Sie den :checked-Pseudo-Klassen-Selektor für die Checkbox, um die Listelemente zu gestalten. Um sie erscheinen zu lassen und in den sichtbaren Bereich zu gleiten, setzen Sie opacity auf 1 und transform auf translateX(0).

Hier ist der HTML- und CSS-Code, um diesen Effekt zu erzielen:

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler" />
  <label for="menu" class="menu-toggler-label">Menu</label>
  <ul class="stagger-menu">
    <li style="--i: 0">Home</li>
    <li style="--i: 1">Pricing</li>
    <li style="--i: 2">Account</li>
    <li style="--i: 3">Support</li>
    <li style="--i: 4">About</li>
  </ul>
</div>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

.menu-toggler-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.stagger-menu {
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity 0.3s cubic-bezier(0.75, -0.015, 0.565, 1.055),
    transform 0.3s cubic-bezier(0.75, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu gestaffelten Animationen abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.

Gestaffelte CSS-Animation für Listenelemente

Einführung

Gestaffelte Animation

Zusammenfassung