อนิเมชันเลื่อนซ้าย (Slide Left) ด้วย Keyframes ใน CSS3

ลองรันโค้ดด้านล่างเพื่อสร้างอนิเมชันเลื่อนซ้าย (Slide Left) ด้วย Keyframes ใน CSS3:

ตัวอย่าง

<html>
  <head>
    <style type="text/css">
      h1 {
        -moz-animation-duration: 3s;
        -webkit-animation-duration: 3s;
        -moz-animation-name: slidein;
        -webkit-animation-name: slidein;
      }
      @-moz-keyframes slidein {
        from {
          margin-left: 100%;
          width: 300%;
        }
        75% {
          font-size: 300%;
          margin-left: 25%;
          width: 150%;
        }
        to {
          margin-left: 0%;
          width: 100%;
        }
      }
      @-webkit-keyframes slidein {
        from {
          margin-left: 100%;
          width: 300%;
        }
        75% {
          font-size: 300%;
          margin-left: 25%;
          width: 150%;
        }
        to {
          margin-left: 0%;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Tutorials Point</h1>
    <p>This is an example of animation left with an extra keyframe to make text changes.</p>
    <button onclick="myFunction()">Reload page</button>
    <script>
      function myFunction() {
        location.reload();
      }
    </script>
  </body>
</html>