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>Tutorials Point</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>

更新於: 2020 年 6 月 21 日

94 次觀看

開始你的 職業生涯

透過完成課程獲得認證

開始
廣告