如何使用 CSS 將元素保持在動畫最終狀態？

使用CSS 維護動畫狀態

在CSS3 中，動畫為元素添加動態運動，但當動畫完成後返回其初始狀態時，會出現一個常見問題。對於期望結果是永久更改的場景，這可能會出現問題。

考慮以下 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>

此動畫將元素向下下降 100 像素。然而，動畫完成後，元素會恢復到原來的位置。

解決方案：使用 -webkit-animation-fill-mode

為了維持動畫的結束狀態，CSS 提供了-webkit-animation-fill-mode 屬性。此屬性控制動畫發生之前和之後元素發生的情況。透過將其設為向前，動畫結束後元素將保持其最終狀態：

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

此方法可確保動畫元素即使在動畫完成後也保留其修改的位置。它允許對元素的外觀進行無縫且持久的更改，使複雜的動畫比循環過程更有價值。

以上是如何使用 CSS 將元素保持在動畫最終狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！