Verwendung von Mehrstufigen Animationen und Übergängen

CSS-Animationen sind großartig und das Konzept ist ziemlich einfach. Benennen Sie die Animation, definieren Sie die Bewegung in @keyframes und rufen Sie dann diese Animation für ein Element auf. Wenn Sie noch nicht damit gearbeitet haben, können Sie sich hier im Almanac über die Syntax informieren.

Während das Konzept einfach ist, gibt es kleine Tricks, um Animationen komplex wirken zu lassen, und einer davon sind mehrstufige Übergänge. Darum geht es in diesem Beitrag.

Ein Keyframe kann ein „Schritt“ sein

Wenn wir eine Keyframe-Animation einrichten, um die Hintergrundfarbe eines Elements von Orange auf Schwarz zu ändern (denn Orange *ist* das neue Schwarz, schließlich) bei Hover über fünf Sekunden, wird es genau das tun. Es teilt diese Änderung über die Zeit auf und macht den Übergang.

body {
  background: black;
  animation: color-me-in 5s; /* other keywords like "infinite alternate" can be useful here */
}

@keyframes color-me-in {
  /* You could think of as "step 1" */
  0% {
    background: orange;
  }
  /* You could think of as "step 2" */
  100% {
    background: black;
  }
}

Siehe den Pen ZbePzr von CSS-Tricks (@css-tricks) auf CodePen.

Wir können beliebig viele Schritte in eine Keyframe-Animation einfügen. Zum Beispiel wird hier Blau mitten im Übergang hinzugefügt.

@keyframes color-me-in {
  0% {
    background: orange;
  }
  /* Adding a step in the middle */
  50% {
    background: blue;
  }
  100% {
    background: black;
  }
}

Siehe den Pen meWoyy von CSS-Tricks (@css-tricks) auf CodePen.

Das ist im Grunde das Konzept mehrstufiger Animationen: mehr als eine Änderung findet in der Animation von Anfang bis Ende statt.

Keyframes werden interpoliert und dazwischen interpoliert, es sei denn, Sie möchten das nicht

Beachten Sie, wie die Farben in jedem der Schritte ineinander überblenden. Das ist eine gute Standardeinstellung. Sie „altern“ sogar ineinander über, da dies die Standard-animation-timing-function ist, eine weitere gute Standardeinstellung, da sie im Allgemeinen viel weicher und entspannter ist als das Computer-artige linear, obwohl alles seinen Zweck hat.

Mit der Funktion steps() können Sie die Interpolation zu einer exakten Anzahl von Keyframes erzwingen. Demo

Siehe den Pen bEdKaW von CSS-Tricks (@css-tricks) auf CodePen.

Mehrstufige Animationen anwenden

Ein gutes Beispiel ist der Sound-Equalizer in Apple Music. Sie haben ihn wahrscheinlich schon gesehen oder zumindest etwas Ähnliches: eine Reihe von vertikalen Balken, die sich auf und ab bewegen, so dass es aussieht, als würden sie im Takt der Musik tanzen.

Hier ist eine nicht bewegte Version dessen, worüber wir sprechen

Siehe den Pen Apple Music Sound Equalizer in SVG von CSS-Tricks (@css-tricks) auf CodePen.

Fünf vertikale Balken, die wir auf und ab bewegen wollen, in verschiedenen Höhen. Erstellen wir eine Animation namens equalize mit 25 Keyframe-Schritten. Das ist ein Schritt für jede 4% der Animation, der dann auf das Element .bar angewendet wird.

Siehe den Pen Apple Music Sound Equalizer in SVG von CSS-Tricks (@css-tricks) auf CodePen.

Gut, aber sie bewegen sich alle im gleichen Tempo und zur gleichen Zeit. Nicht gerade ein cooler Equalizer zum Ansehen. Wir können jedoch jeder .bar eine andere animation-duration geben, wenn die Animation aufgerufen wird, um den Effekt zu erzielen, dass sie sich in unterschiedlichem Tempo bewegen.

Siehe den Pen Apple Music Sound Equalizer in SVG von Geoff Graham (@geoffgraham) auf CodePen.

Da haben wir es! Ein Equalizer, der, wenn er aktiv ist, so aussieht, als würde er sich im Rhythmus eines Liedes bewegen, obwohl wir dieselbe mehrstufige Animation für jedes Element verwenden.

Und hier ist eine Alternative, die mit animation-delay (negative Werte, damit sie alle gleichzeitig starten) spielt.

Siehe den Pen Apple Music Sound Equilizer in SVG von CSS-Tricks (@css-tricks) auf CodePen.

Aber Moment mal, es gibt auch mehrstufige transitions!

Transitions sind wie einfachere Animationen. Sie bewegen sich von einem festen Satz von Eigenschaften zu einem anderen. Die Kurzform

.move-me {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Und genau wie bei animation können wir denselben Satz von Eigenschaften animieren.

Lassen Sie uns eine rote Box bei Hover in ein oranges Rechteck überblenden, indem wir die Eigenschaften background-color und width verketten.

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  transition: 1s;
}

.box:hover {
  width: 300px;
  background-color: orange;
}

Dies teilt unserem .box-Element mit, dass sowohl die Eigenschaften width als auch background-color bei Hover überblendet werden sollen und der Übergang eine Sekunde dauern soll.

Siehe den Pen CSS Transition Property von Geoff Graham (@geoffgraham) auf CodePen.

Noch nicht gerade mehrstufig, aber es ist möglich!

Mehrere Schritte zu Übergängen hinzufügen

Wir können die Dinge etwas interessanter gestalten, indem wir unsere Übergänge mit Kommas verketten und dann mit ihrer Dauer und Verzögerung spielen, um denselben mehrstufigen Bewegungseffekt zu erzielen, der bei Keyframe-Animationen möglich ist.

Nehmen wir das obige Beispiel und lassen Sie es zuerst die Breite ändern, *und danach* die Farbe.

.box {
  transition: 
    /* step 1 */
    width      1s,
    /* step 2 */
    background 0.5s 1s;
}

Siehe den Pen CSS Transition Property von CSS-Tricks (@css-tricks) auf CodePen.

Wir können hier viel ausgefeilter vorgehen und zusätzliche Bewegungen choreografieren.

• Ändern Sie die Breite sofort von 150px auf 300px bei Hover für 1 Sekunde
• Ändern Sie die background-color sofort von Rot auf Orange für 1 Sekunde
• Fügen Sie einen box-shadow hinzu und ändern Sie seine Richtung sofort bei Hover für 1 Sekunde
• Fügen Sie eine Textzeile hinzu, die ausblendet und nach dem Übergang von width und height nach links verschoben wird.
• Fügen Sie eine weitere Textzeile hinzu, die erscheint und von rechts hereinrauscht, nachdem die erste Textzeile verschwunden ist.

Dies können wir erreichen, indem wir unsere Übergänge für jedes Element verketten, bei dem mehrere Eigenschaften zu überblenden sind!

/* Our box element */
.box {
  width: 150px;
  height: 150px;
  background-color: red;
  box-shadow: 5px 5px 25px #000;
  transition: all 1s;
}

/* On hover... */
.box:hover {
  /* Increase width */
  width: 300px;
  /* Change color */
  background-color: orange;
  /* Move the shadow */
  box-shadow: -5px 5px 25px #000;
}

/* The first line of text */
.box__blurb {
  /* Start with full opacity and centered */
  opacity: 1;
  transform: translateX(45px);
  /* Then transition these chained properties */
  transition:
    opacity 0.5s 2s,
    transform 0.5s 0.5s;
}

/* On .box hover... */
.box:hover .box__blurb {
  /* Fade out */
  opacity: 0;
  /* Move over to the right */
  transform: translateX(-500px);
}

/* The second line of text */
.rect__blurb {
  /* Start with no opacity and pushed off the element */
  opacity: 0;
  transform: translateX(500px);
  /* Then transition these chained properties */
  transition: 
    opacity 0.5s 1s,
    transform 0.5s 1s;
}

/* On .box hover... */
.box:hover .rect__blurb {
  /* Face in */
  opacity: 1;
  /* While entering from the right */
  transform: translateX(-100px);
}

Hier ist, was wir haben. Für die Präsentation wurden einige Verzierungen hinzugefügt.

Siehe den Pen Multi-Step Transitions von Geoff Graham (@geoffgraham) auf CodePen.

Hier ist ein weiteres Beispiel für eine Schaltfläche, bei der alle Hover-Effekte klar in Schritte unterteilt sind.

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

Zusammenfassung

Mehrstufige Animationen und Übergänge sind spaßige kleine Tricks, die uns zur Verfügung stehen, um reichhaltige, dynamische Bewegungen in CSS zu erzeugen. Das Beispiel eines Equalizers in diesem Beitrag ist eine praktische Anwendung, aber es gibt viele andere Möglichkeiten, wie mehrstufige Übergänge genutzt werden können. Tatsächlich nutzte Ana Tudor sie, um eine atemberaubende Animation in einem Beitrag zu erstellen, den sie hier auf CSS-Tricks veröffentlichte. Rémi Lacorne hat ein tolles Beispiel für Übergänge.

Wo haben Sie mehrstufige Animationen und Übergänge in Ihren CSS-Animationen verwendet? Haben Sie etwas Superkomplexes erstellt, das Ihre Animationskünste zeigt? Oder vielleicht eine subtile Berührung, die das Benutzererlebnis verbessert? Lassen Sie es uns in den Kommentaren wissen.