EN
此内容没有您的语言版本,但有英语版本。

animationiteration event

The animationiteration event occurs at the end of each iteration of an animation. This event only occurs when the animation-iteration-count property is greater than one.

CSS Animations Module Level 3

 

Syntax

addEventListener Method object.addEventListener("animationiteration", handler, useCapture)

 

Event information

SynchronousNo
BubblesYes
CancelableYes

 

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

Remarks

These events were introduced in Internet Explorer 10.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "webkitAnimationIteration" as an alias for this property.

Examples

This example animates a <div> element, and fires the animationstart, animationend, and animationiteration events to change the text in the box. Try the example online.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


See also

AnimationEvent

 

 

显示:
© 2014 Microsoft