如何讓CSS3動畫完成後保持不變？

保留CSS3 動畫的最終結果

在CSS 動畫中，「Hello World」文字按預期下降，但它返回完成後恢復到原來的位置。這種行為是很自然的，因為動畫結束並且原始樣式恢復。但是，您可能更願意保留最終結果。

要實現此目的，您可以利用 -webkit-animation-fill-mode 屬性。在 WebKit 中引入並在 iOS 4 和 Safari 5 中實現，此屬性可讓您選擇動畫是否持續（在結束或開始時）或完成後重設為原始狀態。

透過設定 -webkit-將animation-fill-mode設定為forwards，動畫的結束狀態將被保留。這允許您保留更改的屬性，即使在動畫完成後也是如此。這是更新後的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>

這樣，「Hello World」文字將下降100 像素並無限期地保留在那裡，保留動畫的最終結果，而不需要額外的JavaScript 或CSS 過渡。

以上是如何讓CSS3動畫完成後保持不變？的詳細內容。更多資訊請關注PHP中文網其他相關文章！