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>

打印页面