Webkit CSS 動畫持久化結束狀態
在CSS3 動畫中，您可能會遇到動畫元素在結束後返回其原始狀態的問題動畫完成。這可以歸因於這樣一個事實：動畫是應用於元素的臨時轉換，一旦完成，元素的原始樣式就會接管。
但是，有一種解決方法，可以讓您確定結束位置「黏。」使用 -webkit-animation-fill-mode 屬性，您可以保留動畫的結束狀態。
例如，考慮以下 CSS 動畫：
<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>動畫結束後，元素將恢復到原來的位置。為了防止這種情況，您可以將以下行新增至 CSS：
<code class="css">-webkit-animation-fill-mode: forwards;</code>
新增此內容後，即使動畫完成後，元素也將保持其平移位置 (100px)。該屬性是在 WebKit 中引入的，並在 iOS 4 和 Safari 5 及更高版本中受支援。
以上是如何讓 WebKit 中的 CSS3 動畫保持最終狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
