onanimationiteration属性

animationiteration 事件的事件处理程序。此事件将会在CSS动画到达迭代结束时发送。当通过执行最后一个动画步骤完成对动画指令序列的单次传递完成时，迭代结束。

onanimationiteration属性语法

var animIterationHandler = target.onanimationiteration;

target.onanimationiteration = Function

onanimationiteration属性值

当animationiteration事件发生时要调用的Function，它指示CSS动画在目标（target）上运行时已到达迭代的末尾，其中，所述目标对象是一个HTML元素（HTMLElement），文件（Document），或窗口（Window）。该函数接收作为输入的单个参数：AnimationEvent描述发生的事件的对象。

onanimationiteration属性示例

让我们创建一个动画，在每次迭代结束时自动暂停，允许用户选择是否开始下一次迭代。这些代码大部分与动画事件的其他示例相同。

HTML内容

以下是需要的HTML内容：

<div class="main">
  <div id="box">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="play">
  Begin Demonstration
</div>

CSS内容

我们来看看我们正在动画的盒子的样式。首先是盒子本身。我们设定它的大小，位置，颜色和布局。请注意，动画没有任何内容。那是因为我们不希望盒子立即开始动画。稍后我们将添加animation样式以启动框的动画效果。

#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
  animation: 2s ease-in-out 0s infinite alternate both paused slideBox;
} 

接下来定义动画的关键帧；他们描述了一个动画，使框从容器的左上角迁移到右下角。

@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

完整的CSS代码如下：

:root {
  --boxwidth:50px;
}

.main {
  width: 300px;
  height:300px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font: 14px "Open Sans", "Arial", sans-serif;
} 

#text {
  width: 46px;
  padding: 10px;
  position: relative;
  text-align: center;
  align-self: center;
  color: white;
  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
} 

 #box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
  animation: 2s ease-in-out 0s infinite alternate both paused slideBox;
} 
 
@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

JavaScript内容

需要编写一些JavaScript代码来处理点击按钮以开始下一次迭代。我们来看一下。

var box = document.getElementById("box");
var iterationCounter = 0;

box.onanimationiteration = function(event) {
  box.style.animationPlayState = "paused";
  document.getElementById("play").innerHTML = "Start Iteration #" + (iterationCounter+1);
};

它设置了两个全局变量：

• box：它引用了我们正在进行动画处理的"box"元素；
  
• iterationCounter，初始值为零，用于表示动画发生了多少次迭代。
  

然后建立onanotationiteration事件处理程序。它只是简单地将盒子的animation-play-state（动画播放状态）设置为“暂停”，然后更新按钮中显示的文本，以指示单击该按钮将开始播放动画的下一次迭代。

最后，我们设置一个处理器来点击运行动画的按钮：

document.getElementById("play").addEventListener("click", function(event) {
  box.style.animationPlayState = "running";
  iterationCounter++;
}, false);

这将box元素的animation-play-state设置为“运行（running）”并递增迭代计数器。

测试运行

你可以在https://codepen.io/pen/中输入上述代码以运行该示例。