Hiệu ứng (Animation)

Animation (còn gọi là hiệu ứng) là tiến trình tạo các thay đổi tới hình dáng và tạo các sự chuyển động của các phần tử.

Qui tắc @keyframes trong CSS

Qui tắc @keyframs sẽ điều khiển các bước hiệu ứng trung gian trong CSS3.

Ví dụ của qui tắc @keyframes với Left Animation

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

Như trong ví dụ trên, chúng ta đã xác định chiều cao, độ rộng, màu, tên và quãng thời gian của hiệu ứng với cú pháp mẫu của qui tắc @keyframes.

Hiệu ứng di chuyển sang trái (Left Animation) trong CSS

<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>Hoc CSS co ban tai HocTV</h1>
      <p>Vi du hieu ung di chuyen tu trai qua phai.</p>
	  <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>

Left Animation sử dụng @keyframes trong CSS

<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>Hoc CSS co ban tai HocTV</h1>
      
      <p>Vi du hieu ung di chuyen tu phai qua trai.</p>
	  <button onclick="myFunction()">Reload page</button>
      <script>
           function myFunction() {
           location.reload();
           }
      </script>
   </body>
</html>


Bình luận