Wie kann man dafür sorgen, dass CSS3-Animationen in WebKit ihren Endzustand beibehalten?

Webkit-CSS-Animation behält den Endzustand bei

Bei CSS3-Animationen kann ein Problem auftreten, bei dem das animierte Element danach in seinen ursprünglichen Zustand zurückkehrt Die Animation ist abgeschlossen. Dies kann auf die Tatsache zurückgeführt werden, dass es sich bei Animationen um vorübergehende Transformationen handelt, die auf ein Element angewendet werden, und sobald sie abgeschlossen sind, übernehmen die ursprünglichen Stile des Elements.

Es gibt jedoch eine Problemumgehung, mit der Sie die Endposition festlegen können. klebrig." Mit der Eigenschaft -webkit-animation-fill-mode können Sie den Endzustand einer Animation beibehalten.

Betrachten Sie beispielsweise 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>

Nach der Animation kehrt das Element in seine ursprüngliche Position zurück. Um dies zu verhindern, können Sie dem CSS die folgende Zeile hinzufügen:

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

Mit diesem Zusatz behält das Element seine übersetzte Position (100 Pixel) auch nach Abschluss der Animation bei. Diese Eigenschaft wurde in WebKit eingeführt und wird in iOS 4 und Safari 5 und höher unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann man dafür sorgen, dass CSS3-Animationen in WebKit ihren Endzustand beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!