Wie sorgt man dafür, dass CSS3-Animationen nach der Fertigstellung erhalten bleiben?

Beibehalten des Endergebnisses von CSS3-Animationen

In Ihrer CSS-Animation wird der Text „Hello World“ wie erwartet nach unten verschoben, aber er kehrt zurück nach der Fertigstellung wieder in seine ursprüngliche Position gebracht. Dieses Verhalten ist natürlich, da die Animation endet und die ursprünglichen Stile fortgesetzt werden. Möglicherweise möchten Sie jedoch, dass das Endergebnis erhalten bleibt.

Um dies zu erreichen, können Sie die Eigenschaft -webkit-animation-fill-mode nutzen. Mit dieser Eigenschaft, die in WebKit eingeführt und in iOS 4 und Safari 5 implementiert wurde, können Sie auswählen, ob die Animation bestehen bleibt (entweder am Ende oder am Anfang) oder nach Abschluss auf ihren ursprünglichen Zustand zurückgesetzt wird.

Durch die Einstellung -webkit- Wenn Sie den Animationsfüllmodus auf „Vorwärts“ setzen, bleibt der Endzustand der Animation erhalten. Dadurch können Sie die geänderten Eigenschaften auch nach Abschluss der Animation beibehalten. Hier ist das aktualisierte CSS:

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}</code>

Damit wird der „Hello World“-Text um 100 Pixel nach unten verschoben und bleibt dort auf unbestimmte Zeit erhalten, wobei das Endergebnis der Animation erhalten bleibt, ohne dass zusätzliche JavaScript- oder CSS-Übergänge erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie sorgt man dafür, dass CSS3-Animationen nach der Fertigstellung erhalten bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!