如何讓 WebKit 中的 CSS3 動畫保持最終狀態？

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中文網其他相關文章！