HTML DOM 样式 animationIterationCount 属性

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

animationIterationCount 属性用于设置或获取动画播放的次数。

语法

以下是语法 −

设置 animationIterationCount 属性 −

object.style.animationIterationCount = "number|infinite|initial|inherit"

值

以下是值 −

Sr.No	值 &说明
1	number 表示动画播放次数的数字值。默认设置为 1。
2	infinite 这使动画无限播放。
3	initial 将此属性设置为初始值。
4	inherit 继承父级属性值。

示例

让我们来看一个 animationIterationCount 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   p {
      color: black;
      animation: shrink 3s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
   }
   @keyframes shrink {
      0% {
         color: white;
         letter-spacing: 1.8em;
      }
      100% {
         color: magenta;
         letter-spacing: 0.01em;
      }
   }
</style>
<script>
   function IncreaseIteration(){
      document.getElementById("PARA1").style.animationIterationCount=5;
      document.getElementById("Sample").innerHTML="The animation Iteration count is now 5";
   }
</script>
</head>
<body>
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Click the below button to change how many times the above animation will run</p>
<button onclick="IncreaseIteration()">INCREASE COUNT</button>
<p id="Sample"></p>
</body>
</html>