initial commit

1 files changed, 179 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html b/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html
new file mode 100644
index 0000000000..c6358d816b
--- /dev/null
+++ b/files/zh-cn/web/api/htmlelement/animationiteration_event/index.html
@@ -0,0 +1,179 @@
+---
+title: 'HTMLElement: animationiteration event'
+slug: Web/API/HTMLElement/animationiteration_event
+tags:
+  - Animation
+  - CSS Animations
+  - animationiteration event
+translation_of: Web/API/HTMLElement/animationiteration_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>animationiteration</code></strong> 事件将被触发 当<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a>的迭代结束且另一个迭代开始时。此事件不会与 {{domxref("HTMLElement/animationend_event", "animationend")}} 事件同时发生t, 因此对于<code>animation-iteration-count</code>次数为1的动画不会发生。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("AnimationEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="例子">例子</h2>
+
+<p>此代码使用 <code>animationiteration</code> 来跟踪动画已完成的迭代次数:</p>
+
+<pre class="brush: js notranslate">const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  console.log(`Animation iteration count: ${iterationCount}`);
+});</pre>
+
+<p>相同, 但使用 <code>onanimationiteration</code> 事件处理程序属性：</p>
+
+<pre class="brush: js notranslate">const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.onanimationiteration = () =&gt; {
+  iterationCount++;
+  console.log(`Animation iteration count: ${iterationCount}`);
+};</pre>
+
+<h3 id="鲜活的范例">鲜活的范例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="animation-example"&gt;
+    &lt;div class="container"&gt;
+        &lt;p class="animation"&gt;You chose a cold night to visit our planet.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;button class="activate" type="button"&gt;Activate animation&lt;/button&gt;
+    &lt;div class="event-log"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+</pre>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js notranslate">const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
+const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
+});
+
+animation.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "Activate animation";
+});
+
+animation.addEventListener('animationcancel', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
+});
+
+applyAnimation.addEventListener('click', () =&gt; {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "Cancel animation";
+  } else {
+    applyAnimation.textContent = "Activate animation";
+  }
+});
+</pre>
+
+<h4 id="结果">结果</h4>
+
+<iframe frameborder="no" height="265" src="" title="Live example"></iframe>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.animationiteration_event")}}</p>
+
+<h2 id="了解更多">了解更多</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS Animations</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>Related events: {{domxref("HTMLElement/animationstart_event", "animationstart")}}, {{domxref("HTMLElement/animationend_event", "animationend")}}, {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li>
+ <li><code>This event on {{domxref("Document")}} targets: {{domxref("Document/animationiteration_event", "animationiteration")}}</code></li>
+ <li><code>This event on {{domxref("Window")}} targets: {{domxref("Window/animationiteration_event", "animationiteration")}}</code></li>
+</ul>