Trong thiết kế giao diện Front-end cho website để đẹp và gây ấn tượng người ta thường sử dụng Animation. Bài viết này giới thiệu về hiệu ứng chuyển động Animation trong CSS3 kết hợp HTML5. Nếu bạn đang muốn tìm hiểu thì đừng bỏ lỡ bài viết này.
Cách sử dụng Animation trong CSS3
Để cho bạn dễ hiểu và không bị rối khi tìm hiểu về Animation thì bạn chỉ cần nhớ:
Tạo hiệu ứng chuyển động cần tới @keyframe.
Cú pháp:
@keyframes Name {
/*code*/
}
Giải thích:
Name: Tên hiệu ứng chuyển động
Code: Đoạn code thực thi
Sử dụng phần trăm từ 0% đến 100%.
from…to: thiết lập giá trị từ khởi đầu (from – tương đương với 0%) đến kết thúc (to – tương đương với 100%).
Các thuộc tính mở rộng:
- Thuộc tính animation-name
- Thuộc tính animation-duration
- Thuộc tính animation-timing-function
- Thuộc tính animation-delay
- Thuộc tính animation-iteration-count
- Thuộc tính aniamtion-direction
- Thuộc tính animation-fill-mode
Điểu hiểu được chúng ta sẽ đi sâu vào các ví dụ sau:
1. Chuyển động từ trên xuống
Bạn hãy chạy đoạn ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: green;
position: relative;
animation: move 4s infinite;
}
@keyframes move {
from {top: 0px;}
to {top: 150px;}
}
</style>
</head>
<body>
<h1>Ví dụ về @keyframes</h1>
<div></div>
</body>
</html>
Giải thích:
Qua ví dụ trên bạn sẽ thấy rằng khi thiết lập một @keyframe move nó sẽ di chuyển từ vị trí top là 0 xuống bottom là 150px.
2. Chuyển động đổi màu liên tục
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: green;
position: relative;
animation: move 4s infinite;
}
@keyframes move {
from {top: 0px;}
to {top: 150px;}
}
</style>
</head>
<body>
<h1>Ví dụ về @keyframes</h1>
<div></div>
</body>
</html>
Với ví dụ này màu sắc sẽ được thay đổi liên tục khi chuyển động.
Các thuộc tính mở rộng
1. animation-name
Cú pháp:
animation-name: name;
Ví dụ:
animation: mymove;
2. animation-duration
Cú pháp:
animation-duration: time;
Thời gian chuyển động có thể là s hoặc ms.
3. animation-iteration-count
Cú pháp:
animation-iteration-count: value;
Value là số lần lặp lớn hơn 1
infinite – chạy không giới hạn số lần
Viết gộp 3 thuộc tính mở rộng trên lại thành một như sau:
animation: mymove 5s infinite;
4. animation-delay
Độ trễ của chuyển động được sử dụng bằng animation-delay
Cú pháp:
animation-delay: value;
5. animation-direction
Xác định chiều chạy cho Animation
normal: animation di chuyển bình thường tiến về phía trước (mặc định)
reverse: animation di chuyển theo hướng ngược lại, lui về sau.
alternate: animation di chuyển tiến về trước, sau đó lui theo hướng ngược lại
alternate-reverse: animation di chuyển ngược lại trước, rồi đổi chiều tiến về trước.
6. animation-timing-function
Xác định tốc độ khi chuyển động
ease: tạo hiệu ứng chuyển đổi khi bắt đầu thì chậm sau đó nhanh dần và gần kết thúc lại chậm dần (giá trị mặc định).
linear: tạo hiệu ứng chuyển đổi từ lúc bắt đầu với lúc kết thúc tốc độ là như nhau.
ease-in: tạo hiệu ứng chuyển đổi chậm lúc bắt đầu.
ease-out: tạo hiệu ứng chuyển đổi chậm lúc kết thúc.
ease-in-out: tạo hiệu ứng chuyển đổi chậm cả lúc bắt đầu và kết thúc.cubic-bezier(n,n,n,n): cho phép bạn xác định một giá trị của riêng mình theo hàm bezier
Gộp chung các thuộc tính
Ví dụ:
div {
animation-name: mymove;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Cú pháp viết gộp:
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode;
Ví dụ:
div {
animation: mymove 5s linear 2s infinite alternate;
}
Qua bài viết này chúng ta đã cùng tìm hiểu về hiệu ứng Animation tạo chuyển động trong CSS3.
Trong bài này kiến thức quan trọng cần phải ghi nhớ đó là hiểu được quy tắc viết @keyframe và các thuộc tính animation mở rộng.
