Wie können Sie mit CSS ein Element in seinem animierten Endzustand halten?

Beibehalten des animierten Zustands mit CSS

In CSS3 fügen Animationen dynamische Bewegung zu Elementen hinzu, aber ein häufiges Problem tritt auf, wenn die Animation nach Abschluss in ihren ursprünglichen Zustand zurückkehrt. Dies kann in Szenarien problematisch sein, in denen das gewünschte Ergebnis eine dauerhafte Änderung ist.

Betrachten Sie die folgende CSS-Animation:

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

@-webkit-keyframes drop {
  from {
    -webkit-transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(100px);
  }
}</code>

Diese Animation lässt ein Element 100 Pixel nach unten fallen. Nach Abschluss der Animation kehrt das Element jedoch in seine ursprüngliche Position zurück.

Lösung: Verwenden des -webkit-animation-fill-mode

Um den Endzustand der Animation beizubehalten, stellt CSS Folgendes bereit: -webkit-animation-fill-mode-Eigenschaft. Diese Eigenschaft steuert, was mit dem Element vor und nach der Animation geschieht. Durch die Einstellung „Vorwärts“ bleibt das Element nach Abschluss der Animation in seinem Endzustand:

<code class="css">-webkit-animation-fill-mode: forwards;</code>

Dieser Ansatz stellt sicher, dass das animierte Element seine geänderte Position auch nach Abschluss der Animation beibehält. Es ermöglicht nahtlose und dauerhafte Änderungen am Erscheinungsbild des Elements und macht komplexe Animationen wertvoller als kreisförmige Prozesse.

Das obige ist der detaillierte Inhalt vonWie können Sie mit CSS ein Element in seinem animierten Endzustand halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!