Animation
với CSS3
Animation (hình ảnh động) trong CSS3 cho phép tạo
animation của hầu hết các phần tử HTML mà cần sử dụng JavaScript hoặc Flash!
Các
trình duyệt hỗ trợ cho animation
Những con số trong bảng cho thấy phiên bản trình duyệt
đầu tiên hỗ trợ đầy đủ thuộc tính animation.
Con số đứng sau là -webkit-, -moz-, hoặc -o- chỉ định
phiên bản đầu tiên hỗ trợ animation với một tiền tố.
Animation
CSS3 là gì?
Một animation (hình ảnh động) cho phép một phần tử dần
dần thay đổi từ một kiểu dáng (style) này sang một kiểu dáng khác.
Bạn có thể thay đổi nhiều thuộc tính CSS và nhiều lần
khi bạn muốn.
Sử dụng animation với CSS3, trước tiên bạn phải xác định
một số khung hình chính (keyframe) cho animation.
Khung hình chính nắm giữ các style mà phần tử sẽ có ở
thời điểm nhất định.
Quy
tắc @keyframes
Khi bạn chỉ định các style bên trong các quy tắc @keyframes, animation sẽ dần dần thay đổi từ style hiện tại với
style mới tại thời điểm nhất định.
Để có được một animation hoạt động, bạn phải ràng buộc
animation cho một phần tử.
Ví dụ sau liên kết những "ví dụ" về
animation với các phần tử <div>. Animation sẽ kéo dài trong 4 giây, và nó
sẽ dần dần thay đổi màu nền của phần tử <div> từ "đỏ" (red)
sang "vàng" (yellow):
/* The animation code */
@keyframes example {
from {background-color:
red;}
to {background-color:
yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Lưu ý:
Nếu thuộc tính animation-duration không xác định, animation sẽ không có hiệu lực, vì
giá trị mặc định là 0.
Trong ví dụ trên, chúng ta đã chỉ định khi style thay
đổi bằng cách sử dụng các từ khóa "from" và "to" (cái miêu
tả 0% (lúc bắt đầu) và 100% (khi hoàn chỉnh)).
Nó cũng có thể sử dụng phần trăm. Bằng cách sử dụng
phần trăm, bạn có thể thêm nhiều thay đổi style khi bạn muốn.
Ví dụ sau sẽ thay đổi màu nền (background-color) của
phần tử <div> khi animation hoàn thành 25%, 50%, và 100%:
/ * Mã animation * /
@keyframes example {
0% {background-color: red;}
25% {background-color:
yellow;}
50% {background-color:
blue;}
100% {background-color: green;}
}
/ * Phần tử áp dụng animation * /
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Ví dụ sau sẽ thay đổi màu nền (background-color) và vị
trí của phần tử <div> khi animation hoàn thành 25%, 50%, 75%, và 100%:
/ * Mã animation * /
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color:
red; left:0px; top:0px;}
}
/ * Phần tử áp dụng animation * /
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Độ
trễ cho animation
Thuộc tính animation-delay chỉ định độ trễ khi khởi đầu của một animation.
Ví dụ sau có độ trễ 2 giây trước khi bắt đầu
animation:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Thiết
lập số lần chạy của một animation
Thuộc tính animation-iteration-count chỉ định số lần chạy của một animation.
Ví dụ sau sẽ chạy các animation 3 lần trước khi nó dừng
lại:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
The following example uses the value
"infinite" to make the animation continue for ever:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Chạy đảo ngược hướng hoặc các chu kỳ thay thế
Thuộc tính animation-direction được sử dụng để cho một animation chạy đảo ngược hướng
hoặc các chu kỳ thay thế.
Ví dụ sau sẽ chạy animation đảo ngược hướng:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}
Ví dụ sau sử dụng giá trị "alternate" để
làm cho animation đầu tiên chạy về phía trước, rồi quay trở lại, sau đó lại chạy
phía trước:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
Chỉ
định speed curve cho animation
Thuộc tính animation-timing-function chỉ định speed curve (đường cong tốc độ) của
animation.
Thuộc tính animation-timing-function có thể có các
giá trị sau:
- ease - chỉ định animation với khởi đầu chậm, tiếp
theo là nhanh, và sau đó kết thúc chậm (đây là mặc định)
- linear - chỉ định animation chạy cùng một tốc độ từ đầu
đến kết thúc ease-in - chỉ định animation với khởi đầu chậm
- ease-out - chỉ định animation với kết thúc chậm
- ease-in-out - chỉ định animation bắt đầu và kết thúc chậm
- cubic-bezier(n,n,n,n) - cho phép bạn xác định giá trị riêng của mình với
hàm cubic-bezier
Ví dụ sau cho thấy một số speed curve khác nhau có thể
được sử dụng:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function:
ease-out;}
#div5 {animation-timing-function:
ease-in-out;}
Thuộc
tính animation rút gọn
Ví dụ dưới đây sử dụng sáu thuộc tính về animation:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Bạn có thể có animation tương tự như ở trên bằng cách
sử dụng thuộc tính rút gọn animation:
div {
animation: example 5s linear 2s infinite alternate;
}
Tự
làm bài tập!
CodeLean.vn
Nguồn w3school.org
Đăng nhận xét