HTML DOM 样式 animationFillMode 属性

htmlweb developmentfront end technology更新于 2024/5/20 17:48:17

animationFillMode 属性用于指定在执行时间之外(即执行完成后或指定了延迟)如何应用样式。这有助于在动画开始前和结束后将 CSS 动画样式设置为元素。

语法

以下是语法 −

设置 animationFillMode 属性 −

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

值

以下是值 −

值	描述
none	动画开始前或结束后不会对目标元素应用任何样式。这是默认值。
forwards	动画结束后，将最后一个关键帧样式应用于目标元素。
backwards	动画结束后，将第一个关键帧样式应用于目标元素。已结束。
both	它将向前和向后规则同时应用于动画。
Initial	用于将此属性设置为初始值。
nherit	从其父元素继承此属性。

示例

让我们看一下 animationFillMode 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      height: 30px;
      width: 30px;
      background-color: orange;
      animation: small 4s;
      animation-fill-mode: forwards;
   }
   @keyframes small {
      0% {
         width: 200px;
         height: 200px;
         background-color: white;
      }
      33% {
         background-color: green;
      }
      66% {
         background-color: violet;
      }
      100% {
         background-color: darkred;
      }
   }
</style>
<script>
   function changeFillMode(){
      document.getElementById("DIV1").style.animationFillMode="backwards";
      document.getElementById("Sample").innerHTML="The animation fillmode is now backwards";
   }
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to change the above animation fillmode property</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html>