path: root/files/zh-cn/web/api/globaleventhandlers/onanimationiteration/index.html

---
title: GlobalEventHandlers.onanimationiteration
slug: Web/API/GlobalEventHandlers/onanimationiteration
translation_of: Web/API/GlobalEventHandlers/onanimationiteration
---
<div>{{APIRef("CSS3 Animations")}}{{Draft}}</div>

<p> {{event("animationiteration")}}事件的处理器 . 当 <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a> 运动到最后一帧时触发。 An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox">var <em>animIterationHandler</em> = <em>target</em>.onanimationiteration;

<em>target</em>.onanimationiteration = <em>{{jsxref("Function")}}</em>
</pre>

<h3 id="Value">Value</h3>

<p>A {{jsxref("Function")}} to be called when an {{event("animationiteration")}} event occurs indicating that a CSS animation has reached the end of an iteration while running on the <em><code>target</code></em>, where the target object is an HTML element ({{domxref("HTMLElement")}}), document ({{domxref("Document")}}), or window ({{domxref("Window")}}). The function receives as input a single parameter: an {{domxref("AnimationEvent")}} object describing the event which occurred.</p>

<h2 id="Example" name="Example">实例</h2>

<p>Let's create an animation which automatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. Much of this code is the same as in other examples of animation events, so it may look familiar.</p>

<div class="hidden">
<h3 id="HTML_content">HTML content</h3>

<pre class="brush: html">&lt;div class="main"&gt;
  &lt;div id="box"&gt;
    &lt;div id="text"&gt;Box&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="button" id="play"&gt;
  Begin Demonstration
&lt;/div&gt;</pre>
</div>

<h3 id="CSS_content">CSS content</h3>

<div class="hidden">
<pre class="brush: 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;
}

 </pre>
</div>

<p>Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the {{cssxref("animation")}} style later to start animating the box.</p>

<pre class="brush: css">#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;
}

</pre>

<p>The animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.</p>

<pre class="brush: css">@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}
</pre>

<h3 id="JavaScript_content">JavaScript content</h3>

<p>Some JavaScript code will need to be written to handle the click on the button to start the next iteration. Let's have a look.</p>

<pre class="brush: js">var box = document.getElementById("box");
var iterationCounter = 0;

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

<p>This sets up two global variables: <code>box</code>, which references the <code>"box"</code> element that we're animating, and <code>iterationCounter</code>, which is initially zero, which indicates how many iterations of the animation have occurred.</p>

<p>The onanimationiteration event handler is then set up. It simply sets the box's {{cssxref("animation-play-state")}} to "paused", then updates the text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.</p>

<p>Finally, we set up a handler for a click on the button that runs the animation:</p>

<pre class="brush: js">document.getElementById("play").addEventListener("click", function(event) {
  box.style.animationPlayState = "running";
  iterationCounter++;
}, false);</pre>

<p>This sets the box element's {{cssxref("animation-play-state")}} to "running" and increments the iteration counter. That's all there is to it!</p>

<h3 id="Result">Result</h3>

<p>Assembled together, you get this:</p>

<p>{{ EmbedLiveSample('Example', 500, 400) }}</p>

<p>Each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.</p>

<h2 id="规范">规范</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationiteration','onanimationiteration')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="兼容性">兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Microsoft Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}} (unprefixed)</td>
   <td>{{CompatGeckoDesktop(51)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}} (unprefixed)</td>
   <td>{{CompatGeckoMobile(51)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
    {{CompatVersionUnknown}} (unprefixed)</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="参见">参见</h2>

<ul>
 <li>The {{event("animationiteration")}} event this event handler is triggered by.</li>
 <li>{{domxref("AnimationEvent")}}</li>
</ul>