CSS 属性

CSS 属性animation-fill-mode 确定在执行之前和之后如何将样式应用于 CSS 动画的目标。

使用简写一次设置所有动画设置属性animation通常很方便。

属性值

CSS属性animation-fill-mode可以具有以下值之一:

none: 当动画未执行时，它不会将任何样式应用于目标。相反，该元素将根据任何其他现有的 CSS 规则显示。此行为代表默认设置。

forwards: 执行期间检测到的最终关键帧设置的计算值将保留在目标上。 animation-direction 和animation-iteration-count 的值决定最终的关键帧:

动画方向动画迭代计数遇到的最后一个关键帧
normal偶数或奇数100% 或
reverse偶数或奇数0% 或从
alternate偶数0% 或从
alternate奇数100 % 或至
alternate-reverse 偶数100% 或至
alternate-reverse 奇数0% 或从

backwards : 一旦动画应用于目标时，它将应用第一个适当关键帧中指定的值，并在动画延迟期间保持这些值。动画方向值确定第一个适当的关键帧:

动画方向第一个相关关键帧
normal 或 alternate 0% 或从
reverse 或 alternate-reverse 100% 或至

both: 动画将遵循向前和向后方向的规则，有效地在两个方向上扩展动画属性。

注意:当在animation-*属性上指定多个逗号分隔值时，这些值将按照动画名称出现的顺序应用于动画。

语法

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 元素悬停在上方时，会触发生长动画。

  • 它会放大圆圈超过1秒。 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">鼠标放上去看效果!</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>鼠标放上去看效果!</div>
</body>
</html>