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>
