CSS3 - ภาพเคลื่อนไหว

แอนิเมชั่นคือกระบวนการเปลี่ยนแปลงรูปร่างและสร้างการเคลื่อนไหวที่มีองค์ประกอบ

@keyframes

คีย์เฟรมจะควบคุมขั้นตอนการเคลื่อนไหวระดับกลางใน CSS3

ตัวอย่างคีย์เฟรมพร้อมภาพเคลื่อนไหวด้านซ้าย -

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

ตัวอย่างด้านบนแสดงความสูงความกว้างสีชื่อและระยะเวลาของภาพเคลื่อนไหวด้วยไวยากรณ์ของคีย์เฟรม

เลื่อนภาพเคลื่อนไหวไปทางซ้าย

<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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การเลื่อนภาพเคลื่อนไหวไปทางซ้ายด้วยคีย์เฟรม

<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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -