VN-Lives: Ví dụ đơn giản về CSS Animations Events.

Bài viết này sẽ cung cấp một ví dụ đơn giản về cách sử dụng CSS Animations Events để tạo hiệu chữ động chạy từ phải sang trái, rồi lại từ trái sang phải, kèm theo sự kiện even in thời gian chạy của hiệu ứng.

Live Demo:

CSS Animations Events Example:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS animations: Animation events</title>
<style type="text/css">
    .slidein {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: 3;
      -webkit-animation-iteration-count: 3;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }

    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }

      to {
        margin-left:0%;
        width:100%;
      }
    }

    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }

      to {
        margin-left:0%;
        width:100%;
      }
    }

</style>
<script>
    function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }

    function setup() {
      var e = document.getElementById("watchme");
      e.addEventListener("animationstart", listener, false);
      e.addEventListener("animationend", listener, false);
      e.addEventListener("animationiteration", listener, false);

      e.className = "slidein";
    }
</script>
</head>
<body onload="setup()">
<h1 class="slidein" id="watchme">Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements
move across the page.</p>
<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
<ul id="output">
<li>Started: elapsed time is 0</li><li>New loop started at time 3</li><li>New loop started at time 6</li><li>Ended: elapsed time is 9</li></ul>

</body></html>

VN-Lives

Ví dụ đơn giản về CSS Animations Events. | CSS Animations Events Example.

No comments:

Post a Comment