CSS-Kurs / Keyframe-Animationen, Fill-Modi und Pausieren

CSS-Keyframe-Animationen beschreiben Eigenschaftswerte über die Zeitleiste einer Animation und können ohne Hover- oder Fokus-Trigger ausgeführt werden. Dauer, Verzögerung, Wiederholungsanzahl, Fill-Mode und Wiedergabestatus steuern verschiedene Teile dieses Verhaltens.

Unterscheiden Sie zwischen Übergängen und Keyframe-Animationen

Die Transition ist einfach, solange sich die Hintergrundfarbe des Buttons ändert. Sie können sich Animationen für Effekte ansehen, wie zum Beispiel, wenn eine Benachrichtigung zum ersten Mal erscheint, oder für eine visuelle Erklärung, die mehrere Schritte durchläuft. Dasselbe Property am selben Element gleichzeitig mit zwei Funktionen zu steuern, erschwert es, nachzuvollziehen, welcher Wert angewendet wird. Daher teilen wir für diese Übung die Rollen. Wenn die Effekte vor und nach der Zustandsänderung ausreichen, können Sie mit einer einfachen Transition unter Verwendung der CSS-Transformationen und -Transitions der Transition beginnen.

Keyframes und Wiedergabeeinstellungen definieren

Im Keyframe entspricht from 0% und to entspricht 100%. Wenn Sie einen Zwischenzustand benötigen, fügen Sie einen Fortschrittsprozentsatz wie 50% hinzu. Das bloße Deklarieren eines Keyframe-Namens bewirkt nicht, dass es abgespielt wird; Sie müssen es mit dem animation-name des Elements verknüpfen.

@keyframes travel {
  0% { transform: translateX(0); }
  50% { transform: translateX(3rem); }
  100% { transform: translateX(6rem); }
}
.marker { animation: travel 4s linear 1s 1 normal forwards; }

Dieser Teilcode ist eine verkürzte Version des Keyframes und der .marker-Einstellung mit demselben Namen im vollständigen Beispiel unten. 4s ist die Zeit, die zum einmaligen Abspielen benötigt wird, und 1s ist die Startverzögerung. Wenn die Dauer nicht angegeben ist, beträgt der Standardwert 0 Sekunden, was es schwierig macht, den Bewegungsprozess zu beobachten. Sie können Verwirrung über Zeit und Frequenz reduzieren, indem Sie sie zunächst in einzelne CSS-Eigenschaften aufteilen.

Selbst wenn die Raten in gleichen Intervallen geschrieben sind, wird sich die tatsächliche Positionsänderung in Abhängigkeit von der Zeit unterscheiden. Diese Übung verwendet linear, wodurch es einfach ist, Zwischenpositionen zu überprüfen. Für die Erstellung und Verbindung von Keyframes, siehe das MDN-Dokument @keyframes .

Vergleichen Sie Richtung, Iterationsanzahl und Fill-Modus

normal läuft vom Anfang bis zum Ende, und reverse läuft vom Ende bis zum Anfang. alternate spielt abwechselnd erstmals vorwärts und beim nächsten Mal rückwärts ab. Wenn die Anzahl der Iterationen 2 beträgt und abwechselnd ist, wird der letzte beim ersten Keyframe ankommen.

forwards ist keine Einstellung, die immer den 100%-Keyframe beibehält. Abhängig von der Wiedergaberichtung und der Anzahl der Durchläufe wird der Wert des zuletzt tatsächlich erreichten Keyframes beibehalten. Im Beispiel wird bei einmaliger Wiedergabe in Vorwärtsrichtung die Position 6rem beibehalten, bei einmaliger Wiedergabe in Rückwärtsrichtung wird die Position 0 beibehalten, und bei zweimaliger Wiedergabe im alternierenden Modus wird ebenfalls die Position 0 beibehalten. Diese Beschreibung basiert auf einer ganzzahligen Anzahl von abgeschlossenen Durchläufen; eine Bruchzahl kann in der Mitte des Ablaufs enden. der MDN-Referenz zu animation-fill-mode und Wiedergaberichtungen zusammengefasst.

Wenn der Basis-CSS-Wert und der End-Keyframe-Wert gleich sind, kann der Unterschied zwischen none und forwards unsichtbar sein. Die untenstehende Bewegungsbox hat eine Standardposition von 1rem, einen Startwert von 0 und einen Endwert von 6rem, um den Unterschied zu zeigen. Der wichtige Hinweistext verwendet dagegen bereits im Basis-CSS einen sichtbaren Zustand und bleibt nach dem Entfernen der Animation lesbar.

Führen Sie eine Einstellung nach der anderen aus und ändern Sie diese

Speichern Sie den folgenden Code als animation-lab.html in UTF-8 und öffnen Sie ihn in Ihrem Browser. Der obere Hinweis wird kurz eingeblendet und bleibt anschließend sichtbar, und die untere dekorative Box beginnt nach 1 Sekunde zu bewegen und bewegt sich 4 Sekunden lang. Nach dem Ändern der Werte speichern Sie die Datei und laden die Seite neu, um von Anfang an zu vergleichen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Keyframes and end states exercise</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
.notice { padding: 1rem; border: 1px solid #90bdd8; border-radius: .5rem; background: #eaf4fa;
  opacity: 1; transform: none; animation: appear 400ms ease-out; }
@keyframes appear {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.track { margin-block: 1rem; padding: 1rem; border: 2px dashed #8a9ba7; }
.marker { width: 2rem; height: 2rem; border-radius: .25rem; background: #166b92;
  transform: translateX(1rem);
  animation-name: travel; animation-duration: 4s; animation-timing-function: linear;
  animation-delay: 1s; animation-iteration-count: 1; animation-direction: normal;
  animation-fill-mode: forwards; }
@keyframes travel {
  0% { transform: translateX(0); background-color: #166b92; }
  50% { transform: translateX(3rem); background-color: #6a3989; }
  100% { transform: translateX(6rem); background-color: #28633b; }
}
#pause:checked ~ .track .marker { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .notice, .marker { animation: none; }
}
  </style>
</head>
<body>
<main>
<h1>Check entrance and movement</h1>
<p class="notice">This notice remains readable without animation.</p>
<h2>Comparing end states</h2>
<p>Movement starts one second after loading. Refresh the page to compare again.</p>
<input id="pause" type="checkbox"><label for="pause">Pause movement</label>
<div class="track"><div class="marker" aria-hidden="true"></div></div>
<p>The colors and movement are decorative. Essential information remains available independently of the animation, as in this sentence.</p>
</main>
</body>
</html>

1. In den Standardeinstellungen befindet sich das Kästchen während der Verzögerung an Position 1rem, bewegt sich zu 0 beim Start und bleibt am Ende bei Position 6rem. Überprüfen Sie den Unterschied zwischen dem Verzögerungswert und dem Startwert.
2. Ändern Sie nur animation-fill-mode zu none und aktualisieren Sie. Nach Abschluss kehrt es zur Standardposition von 1rem und der standardmäßigen blauen Farbe zurück. Wiederherstellen zu forwards.
3. Ändern Sie nur fill-mode zu both. Die Startposition 0 gilt auch während Verzögerungen. Nach Bestätigung kehren Sie zu forwards zurück.
4. Lassen Sie die Anzahl bei 1 und ändern Sie die Richtung zu reverse. Nach Abschluss überprüfen Sie, ob die 0-Position erhalten bleibt, und stellen Sie den Normalzustand wieder her.
5. Überprüfen Sie die Ergebnisse, indem Sie die Richtung auf alternate ändern und die Anzahl bei 1 belassen. In diesem Zustand, wenn Sie die Zahl auf 2 ändern, wird eine zweite Wiedergabe erfolgen. Nach der Bestätigung ist die Anzahl 1 und die Richtung wird auf normal zurückgesetzt.
6. Unmittelbar nach dem Aktualisieren aktivieren Sie das Kontrollkästchen Pause movement und warten einen Moment. Wenn Sie das Häkchen entfernen, läuft die Animation von der angehaltenen Position weiter. Dies unterscheidet sich von der Möglichkeit, von Anfang an erneut abzuspielen.

Halten Sie den Inhalt sichtbar mit reduzierter Bewegung

Die reduzierte Einstellung entfernt die Animationen der Hinweis- und Dekorationsboxen. Die Anweisungen sind weiterhin lesbar, da die Standardeinstellung opacity: 1 ist und der Kasten an der Standardposition von 1rem erscheint. Das Beibehalten des lesbaren Zustands nur in End-Keyframes oder über forwards kann dazu führen, dass Inhalte bei fehlender Animation verschwinden.

Aktivieren Sie reduzierte Bewegung im DevTools Rendering-Panel oder im Betriebssystem und laden Sie die Seite neu. Beide Elemente sollten still bleiben, während ihr Inhalt sichtbar bleibt. Konsultieren Sie die MDN-Anleitung zu prefers-reduced-motion und stellen Sie danach die Emulationseinstellung nach dem Vergleich wieder her. Befolgen Sie auch die Anleitung zu Breite, Zoom und Tastatur bei responsivem CSS, um das Abschneiden und die Benutzerfreundlichkeit bei deaktivierter Bewegung zu überprüfen.

Bevor Sie unendliche Wiederholungen hinzufügen, entscheiden Sie, warum Bewegung erforderlich ist und wie sie gestoppt wird. Dieses Beispiel verwendet endliche Wiederholungen und liefert wichtige Informationen unabhängig von Bewegung und Farbe. Wenn sich nichts bewegt, überprüfen Sie den Animationsnamen, die Dauer und die Reduced-Motion-Bedingung. Bei einem unerwarteten Endzustand vergleichen Sie Richtung, Anzahl der Wiederholungen, Füllmodus und das zugrunde liegende CSS.