CSS - animation-fill-mode 屬性

CSS 屬性 `animation-fill-mode` 決定了 CSS 動畫的目標元素在動畫執行之前和之後如何應用樣式。

使用簡寫屬性 animation 一次性設定所有動畫設定通常很方便。

可能的值

CSS 屬性 `animation-fill-mode` 可以具有以下值之一：

none - 當動畫未執行時，它不會向目標應用任何樣式。相反，元素將根據任何其他已設定的 CSS 規則顯示。此行為代表預設設定。

forwards - 動畫執行期間檢測到的最終關鍵幀設定的計算值將保留在目標上。`animation-direction` 和 `animation-iteration-count` 值決定最終關鍵幀。

animation-direction	animation-iteration-count	遇到的最後一個關鍵幀
normal	even 或 odd	100% 或 to
reverse	even 或 odd	0% 或 from
alternate	even	0% 或 from
alternate	odd	100% 或 to
alternate-reverse	even	100% 或 to
alternate-reverse	odd	0% 或 from

backwards - 一旦動畫應用於目標，它將應用在第一個相關關鍵幀中指定的值，並在動畫延遲期間保持這些值。`animation-direction` 值決定第一個相關關鍵幀。

animation-direction	第一個相關關鍵幀
normal 或 alternate	0% 或 from
reverse 或 alternate-reverse	100% 或 to

both - 動畫將遵守向前和向後方向的規則，有效地擴充套件兩個方向的動畫屬性。

注意：當在一個 `animation-*` 屬性上指定多個用逗號分隔的值時，這些值將按照 `animation-name` 出現的順序應用於動畫。

語法

animation-fill-mode = <single-animation-fill-mode># 

<single-animation-fill-mode> = none | forwards | backwards | both;

應用於

所有 HTML 元素，`::before` 和 `::after` 偽元素。

CSS animation-fill-mode - backwards 值

以下示例演示了 `animation-fill-mode`。

在給定的 CSS 示例中，`animation-fill-mode` 屬性設定為 `backwards`。
當懸停在 `.animation-demo` 元素上時，將觸發 `grow` 動畫。
它在一秒鐘內放大圓圈。`animation-fill-mode: backwards` 屬性確保當結束懸停狀態時，元素保留動畫開始前的初始狀態。

<html>
<head>
<style>
   .animation-demo {
      width: 200px;
      height: 200px;
      margin-left: 150px;
      margin-top: 150px;
      background-color: #2799db;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 20px;
      transition: all 1s ease;
   }
   @keyframes grow {
      0% {
      transform: scale(1);
      }
      100% {
      transform: scale(1.5);
      }
   }
   .animation-demo:hover {
      animation-name: grow;
      animation-duration: 1s;
      animation-fill-mode: backwards;
   }
</style>
</head>
<body>
<div class="animation-demo">Hover over this!</div>
</body>
</html>

CSS animation-fill-mode - forwards 值

以下示例演示了 `animation-fill-mode`。

在這個例子中，`animation-fill-mode: forwards;` 應用於初始動畫，以確保動畫完成後元素保留其最終狀態（完全可見）。
當滑鼠指標懸停在元素上時，由於在懸停時分配了單獨的動畫（`animation-fill-mode: forwards;`），動畫會反轉，保持最終狀態，以便即使在懸停動畫結束後，元素也保持在其最終位置。
此屬性保留元素的視覺狀態，無論是在動畫之後還是在懸停動畫之後，都能保持外觀一致，而不會恢復到之前的狀態。

<html>
<head>
<style>
   @keyframes slidein {
      from {
            margin-left: 100%;
            width: 300%;
      }
      to {
            margin-left: 0%;
            width: 100%;
      }
      } 
      @keyframes slideback {
      from {
            margin-left: 0%;
            width: 100%;
      }
      to {
            margin-left: 100%;
            width: 300%;
      }
   }
   div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: slidein;
      animation-duration: 6s;
      animation-fill-mode: forwards;
      font-size: 20px;
      color: white;
   }
   div:hover {
      animation-name: slideback;
      animation-duration: 6s;
      animation-fill-mode: forwards;
   }
</style>
</head>
<body>
<div>Hover Over This!</div>
</body>
</html>

列印頁面