Zustandswechsel mit CSS Keyframes

Sagen wir, Sie möchten, dass ein Element 9 Sekunden lang in einem Zustand und dann 1 Sekunde lang in einem anderen Zustand in einer Schleife ist.

Keine Überblendung zwischen den Zuständen, nur ein direkter Wechsel.

Ich habe mich neulich gefragt, wie man das machen könnte, und Sarah Drasner hat mir gezeigt, dass man mit sehr, sehr kurzen Abständen zwischen Keyframes von einem Zustand in einen anderen wechseln kann. Zum Beispiel von 59,999 % auf 60 %. Bei einer normalen Animationsdauer von 10 Sekunden gibt es dort keine Möglichkeit zu überblenden.

Siehe den Pen State Change with Quick Keyframe Change von Chris Coyier (@chriscoyier) auf CodePen.

Vielleicht etwas sauberer, man muss nicht einmal mit dem .999-Kram tricksen, wenn man `steps` verwendet, so wie hier:

div {
  ...
  animation: color 10s steps(10) infinite both;
}

Einzelner Keyframe / Einzelner Schritt-Wechsler

Das hat mich dazu gebracht, über etwas anderes, super komisches CSS zu stolpern. Man würde denken, wenn man `steps(1)` verwendet, dass gar keine Änderung stattfindet, richtig? Da es nur einen Schritt gibt? Nicht wahr, es gibt tatsächlich 2 Schritte, wenn man `steps(1)` verwendet, aus welchem Grund auch immer. Das können wir nutzen.

Nehmen wir an, wir verfolgen die ursprüngliche Prämisse dieses Artikels: ein Zustand für 9 Sekunden und ein anderer Zustand für 1 Sekunde. So:

1-1-1-1-1-1-1-1-1-2

Sie könnten

div {
  ...
  background: orangered;
  animation: color 10s steps(1) infinite both;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Dieser `div` wird nur 1 Sekunde lang teal sein! Dann wechselt er zurück zu orangered. Ändern Sie diesen Keyframe auf 70 % und Sie erhalten:

1-1-1-1-1-1-1-2-2-2

Ändern Sie ihn auf 10 % und Sie erhalten:

1-2-2-2-2-2-2-2-2-2

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

Zustand ändern und „dort bleiben“

Wir haben jetzt einen ziemlich coolen Trick auf Lager, um den Zustand in einer zeitgesteuerten Schleife zu ändern. Wenn Sie den Schleifenteil nicht möchten, könnten Sie die Animation einmal durchlaufen lassen und dort bleiben, wie hier:

div {
  ...
  background: orangered;
  animation: color 10s steps(1) forwards;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Alles, was wir hier getan haben, ist das Schlüsselwort `infinite` zu entfernen, das die Wiederholung bewirkte, und `forwards` zu verwenden, was bedeutet: "Wenn das Ende erreicht ist, behalte die Stile im Endzustand bei". (Das Schlüsselwort `both` tut dies ebenfalls.)

Aber wie wechselt man auf Benutzerinteraktion von einem Zustand in einen anderen? Selbst das ist möglich! Stellen Sie sich eine Animation mit einer sehr langen Dauer vor (wie Tage und Tage). Sie könnten eine Benutzerinteraktion verwenden, um zu verschiedenen Positionen (Zuständen) innerhalb dieser Animation zu springen. Hier ist eine einfache Demo davon, bei der das Klicken auf einen Link einen `:target`-Zustand auslöst, der eine Animation auslöst, um zu einer Position innerhalb von Keyframes zu springen, die diesen Zustand stylen.

Siehe den Pen Keyframe State Changer von Chris Coyier (@chriscoyier) auf CodePen.

Nur Tricks, Leute. Wir sind das ganze Jahrzehnt hier.