CSS3: Animation (Hoạt ảnh)
Giải phóng thời gian, khai phóng năng lực
CSS3 cho phép bạn thiết lập các hoạt ảnh có thể thay thế cho ảnh động, hoạt ảnh bằng Flash, hoạt ảnh bằng code JavaScript hay jQuery trong các trang web của website.
Quy tắc @keyframes
Để tạo hoạt ảnh bằng CSS3 bạn cần phải nắm được quy tắc @keyframes bởi đây chính là nơi bạn đặt code CSS để tạo ra hoạt ảnh.
Trình duyệt hỗ trợ
Thuộc tính |
Trình duyệt hỗ trợ |
||||
@keyframes |
IE |
FF |
Chrome |
Safary |
Opera |
animation |
IE |
FF |
Chrome |
Safary |
Opera |
Các trình duyệt Internet Explorer từ phiên bản 10 trở lên, Firefox và Opera hỗ trợ hoàn toàn @keyframes và thuộc tính animation, còn nếu bạn muốn trình duyệt Chrome và Safari hỗ trợ thì bạn phải sử dụng tiền tố -webkit-.
Ví dụ:
@keyframes myfirst{ //Tạo hoạt ảnh có tên myfirst
from {background: red;} //Hoạt ảnh này sẽ chuyển nền từ màu đỏ
to {background: yellow;} //sang màu vàng
}
@-webkit-keyframes myfirst{ /* Safari và Chrome */
from {background: red;}
to {background: yellow;}
}
Thuộc tính animation trong CSS3
Sau khi tạo được hoạt ảnh trong @keyframe thì bạn cần phải gắn nó với một bộ chọn nào đó để sử dụng. Việc gắn hoạt ảnh cho bộ chọn phải thông qua thuộc tính animation với ít nhất hai giá trị là tên của hoạt ảnh và thời gian thực hiện hoạt ảnh.
Ví dụ sau đây sẽ gắn hoạt ảnh có tên "myfirst" được tạo ra trong ví dụ trên vào phần tử <div> và hoạt ảnh này sẽ thực hiện trong thời gian là 05 giây:
div{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
Còn đây là ví dụ hoàn chỉnh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:100px;
height:100px;
background:green;
color:white;
text-align:center;
}
div:hover{
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
}
@keyframes myfirst{
from {background:green;}
to {background:yellow;}
}
@-webkit-keyframes myfirst{
from {background:green;}
to {background:yellow; color:green;}
}
</style>
</head>
<body>
<div>Chạm tôi => Tôi sẽ đổi màu trong 5s.</div>
</body>
</html>
Vậy hoạt ảnh trong CSS3 là gì?
Bản chất của hoạt ảnh trong CSS3 là hiệu ứng cho phép một phần tử nào đó dần dần chuyển từ trạng thái này sang trạng thái khác.
Bạn có thể thay đổi nhiều trạng thái cũng như thay đổi trạng thái nhiều lần cho phần tử.
Bạn có thể sử dụng tỷ lệ phần trăm (%) hoặc sử dụng các từ khóa 'from' (0%) và 'to' (100%) để thiết lập việc chuyển đổi trạng thái.
Sau đây là hai ví dụ nữa giúp bạn hiểu rõ hơn về hoạt ảnh trong CSS3.
Ví dụ 1: Ví dụ này thiết lập hoạt ảnh cho phần tử <div> chuyển màu nền từ red sang green trong thời gian 5 giây, trong đó 25% thời gian đầu sẽ chuyển từ red sang yellow, 25% thời gian tiếp theo sẽ chuyển từ yellow sang blue và 50% thời gian cuối cùng sẽ chuyển từ blue sang green.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div{
width:200px;
height:200px;
background:red;
color:white;
}
#div:hover{
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari và Chrome */
}
@keyframes myfirst{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst{ /* Safari and Chrome */
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<p><b>Lưu ý:</b> Sau khi kết thúc hoạt ảnh phần tử lại quay trở lại trạng thái ban đầu.</p>
<div id="div">Chạm tôi => Tôi sẽ chuyển thành nhiều màu trong 5s.</div>
</body>
</html>
Ví dụ 2: Còn đây là ví dụ tạo hoạt ảnh thay đổi màu nền và vị trí của phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div{
width:100px;
height:100px;
background:red;
position:relative;
color:white;
text-align:center;
}
#div:hover{
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari và Chrome */
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{ /* Safari and Chrome */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="div">Chạm tôi => Tôi di chuyển.</div>
</body>
</html>
Các thuộc tính Animation trong CSS3
Dưới đây là danh sách gồm thuộc tính animation và những thuộc tính con của animation:
Thuộc tính |
Mô tả |
CSS |
@keyframes |
Định nghĩa hoạt ảnh |
3 |
animation |
Thuộc tính tổng hợp của tất cả những thuộc tính con của animation (ngoại trừ thuộc tính con animation-play-state) |
3 |
animation-name |
Dùng để xác định tên của @keyframes |
3 |
animation-duration |
Dùng để xác định thời gian (tính theo giây hoặc mini giây) diễn ra hoạt ảnh, mặc định là 0. |
3 |
animation-timing-function |
Mô tả chu kỳ của một hoạt ảnh, mặc định là "ease". |
3 |
animation-delay |
Xác định độ trễ của hoạt ảnh mỗi khi bắt đầu, mặc định là 0. |
3 |
animation-iteration-count |
Xác định số lần thực thi hoạt ảnh, mặc định là 1. |
3 |
animation-direction |
Xác định hoạt ảnh có được thực thi ngược hay không, mặc định là "normal". |
3 |
animation-play-state |
Xác định hoạt ảnh đang được thực thi hay đang tạm dừng, mặc định là "running". |
3 |
Sau đây là hai ví dụ về hai cách sử dụng hoạt ảnh khác nhau:
Ví dụ 1: Ví dụ này sẽ sử dụng từng thuộc tính con của animation để thiết lập hoạt ảnh.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div{
width:100px;
height:100px;
background:red;
position:relative;
color:white;
text-align:center;
}
#div:hover{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari và Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{ /* Safari and Chrome */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="div">Chạm tôi => Sau 2s tôi sẽ di chuyển liên tục.</div>
</body>
</html>
Ví dụ 2: Ví dụ này sẽ kết hợp tất cả các giá trị liên quan đến các thuộc tính con của animation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div{
width:100px;
height:100px;
background:red;
position:relative;
color:white;
text-align:center;
}
#div:hover{
animation: myfirst 2s linear 2s infinite alternate;
/* Safari và Chrome: */
-webkit-animation: myfirst 2s linear 2s infinite alternate;
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{ /* Safari and Chrome */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50%; top:0px;}
50% {background:blue; left:50%; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div id="div">Chạm tôi => Sau 2s tôi sẽ di chuyển liên tục.</div>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực