使用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%
            }
            to {
               margin-left:0%; width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%; width:300%
            }
            to {
               margin-left:0%; width:100%;
            }
          }
      </style>
   </head>
   <body>
      <h1>nhooo.com</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script> function myFunction() { location.reload(); } </script>
   </body>
</html>

基础教程