如何使用 CSS 將元素保持在動畫最終狀態？-css教學-PHP中文網

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

Patricia Arquette

發布： 2024-10-29 17:02:02

原創

771 人瀏覽過

How Can You Keep an Element in its Animated End State with 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中文網其他相關文章！