Live Code Editor Version 2.0

Hướng dẫn tạo hiệu ứng animations với javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          .container {
            width: 500px;
            margin: auto;
            text-align: center;
          }
          #myContainer {
            width: 400px;
            height: 400px;
            margin: auto;
            position: relative;
            background: #222222;
          }
          #myAnimation {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: #FF0000;
          }
          #btn {
            width: 150px;
            height: 40px;
            margin: 20px;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo hiệu ứng Animation</h2>
        <button id="btn" onclick="myMove()">Xem kết quả</button>
        <div id ="myContainer">
          <div id ="myAnimation"></div>
        </div>
      </div>
    </body>
    <script type="text/javascript">
      function myMove() {
        var btn = document.getElementById("btn"); 
        // ẩn button sau khi click
        btn.style.display = "none";
        var elem = document.getElementById("myAnimation");   
        var pos = 0;
        var id = setInterval(frame, 10);
        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos++; 
            elem.style.top = pos + 'px'; 
            elem.style.left = pos + 'px'; 
          }
        }
      }
    </script>
</html>