Animation CSS là một phần không thể thiếu trong việc tạo nên những trải nghiệm web sinh động và hấp dẫn. Với khả năng điều khiển sự chuyển động và thay đổi của các yếu tố trên trang web, Animation CSS đã trở thành công cụ quan trọng giúp trang web thu hút người dùng hơn bao giờ hết. Bài viết này sẽ đi sâu vào tìm hiểu về Animation CSS là gì, bao gồm 8 thuộc tính quan trọng cùng cách sử dụng chúng để tạo ra những hiệu ứng độc đáo.
Animation CSS là gì?
Animation CSS là công cụ cho phép tạo ra các hiệu ứng chuyển động mượt mà cho các yếu tố trên trang web. Cơ chế hoạt động của Animation CSS dựa vào việc thiết lập các khung hình chính (keyframes), mỗi khung hình xác định trạng thái của phần tử tại một thời điểm cụ thể trong quá trình hoạt ảnh. Khi liên tục thay đổi các keyframes, người dùng có thể tạo ra nhiều loại chuyển động khác nhau cho website.
Quy tắc keyframe animation CSS
Animation CSS sử dụng quy tắc @keyframes, đóng vai trò quan trọng trong việc chỉ định rõ các thuộc tính cần thay đổi và thời điểm xảy ra sự thay đổi. Mỗi keyframe tương ứng với một thời điểm cụ thể trong chuỗi animation, ghi lại trạng thái của thành phần tại thời điểm đó.
Cú pháp:
/*property-name*/: /*value*/;
Trong đó:
- property-name: tên thuộc tính animation CSS.
- value: giá trị tương ứng của các thuộc tính animation CSS đó.
Dưới đây là danh sách 8 thuộc tính chính của Animation CSS:
| Thuộc tính | Mô tả | Giá trị | |
| animation-delay | Thiết lập độ trễ bắt đầu của animation. | time (ví dụ: 3s, 500ms) | |
| animation-name | Dùng để xác định tên keyframe (@keyframes) của animation. | none | keyframe-name |
| animation-duration | Cấu hình thời gian để hoàn thành một chu kỳ của animation. | time (ví dụ: 5s, 600ms) | |
| animation-timing-function | Nhận biết cách animation chuyển đổi giữa các keyframe. | linear, ease, ease-in, ease-out, ease-in-out… | |
| animation-iteration-count | Xác định số lần lặp lại của animation. | infinite | number (1, 2, 3, …) |
| animation-direction | Cấu hình hướng phát của animation. | normal, reverse, alternate, alternate-reverse | |
| animation-fill-mode | Cấu hình cách animation áp dụng các kiểu trước và sau khi chạy. | none, forwards, backwards, both | |
| animation-play-state | Điều khiển trạng thái phát của animation (chạy hoặc dừng). | running, paused |
Ví dụ minh họa
- animation-name
css
animation-name: none | keyframe-name;
Nếu có nhiều keyframes mô tả hoạt ảnh, thuộc tính animation-name sẽ áp dụng hiệu ứng này cho phần tử có class là .box.
- animation-duration
css
animation-duration: time;
Lưu ý rằng thuộc tính animation-duration không ảnh hưởng đến số lần lặp lại của animation.
- animation-timing-function
Cú pháp:
css
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start|end) | cubic-bezier(n,n,n,n);
- linear: Animation có tốc độ đều.
- ease (mặc định): Animation bắt đầu chậm, sau đó nhanh hơn và cuối cùng chậm lại.
- ease-in: Animation bắt đầu chậm, sau đó nhanh hơn.
- ease-out: Animation bắt đầu nhanh, sau đó chậm lại.
- ease-in-out: Kết hợp giữa ease-in và ease-out.
- step-start: Animation chuyển đổi ngay lập tức tại đầu mỗi bước.
- step-end: Animation chuyển đổi ngay lập tức tại cuối mỗi bước.
- steps(int, start|end): Animation tiến hành qua một số bước xác định.
- cubic-bezier(n,n,n,n): Tùy chỉnh đường cong tốc độ với các giá trị Bézier.
Dưới đây là ví dụ code minh họa cho thuộc tính animation-timing-function:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
# div1 { animation-timing-function: cubic-bezier(0, 0, 1, 1); }
# div2 { animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
# div3 { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
# div4 { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
# div5 { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
@keyframes mymove {
from { left: 0px; }
to { left: 300px; }
}
</style>
</head>
<body>
<h1>Elements with Different Cubic Bezier Speed Values</h1>
<div id=”div1″>cubic-bezier(0,0,1,1)</div>
<div id=”div2″>cubic-bezier(0.25,0.1,0.25,1)</div>
<div id=”div3″>cubic-bezier(0.42,0,1,1)</div>
<div id=”div4″>cubic-bezier(0,0,0.58,1)</div>
<div id=”div5″>cubic-bezier(0.42,0,0.58,1)</div>
</body>
</html>
- animation-delay
Thuộc tính animation-delay cho phép bạn kiểm soát thời gian chờ trước khi animation bắt đầu:
css
animation-delay: time;
html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
display: inline-block;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.box1 { animation-delay: 1s; }
.box2 { animation-delay: 2s; }
.box3 { animation-delay: 3s; }
</style>
</head>
<body>
<div class=”box box1″></div>
<div class=”box box2″></div>
<div class=”box box3″></div>
</body>
</html>
- animation-iteration-count
Với animation-iteration-count, bạn có thể xác định số lần animation được lặp lại:
css
animation-iteration-count: infinite | number;
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(175, 167, 94);
position: relative;
animation: mymove 3s;
animation-iteration-count: 2;
}
@keyframes mymove {
from { left: 0px; }
to { left: 200px; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- animation-direction
Thuộc tính animation-direction cho phép bạn kiểm soát hướng của animation sau mỗi chu kỳ:
css
animation-direction: normal | reverse | alternate | alternate-reverse;
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vietnix</title>
<style>
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
.box {
width: 100px;
height: 100px;
background-color: rgb(100, 245, 255);
margin: 10px;
display: inline-block;
animation-duration: 2s;
animation-fill-mode: forwards; /* Giữ trạng thái cuối sau khi kết thúc */
}
.box1 {
animation-name: slideIn;
animation-direction: alternate; /* Animation sẽ chạy luân phiên */
animation-iteration-count: infinite; /* Animation lặp lại vô hạn */
}
.box2 {
animation-name: slideOut;
animation-direction: alternate-reverse; /* Animation chạy ngược lại rồi lại xuôi */
animation-iteration-count: infinite; /* Animation lặp lại vô hạn */
}
</style>
</head>
<body>
<div class=”box box1″></div>
<div class=”box box2″></div>
</body>
</html>
- animation-fill-mode
Thuộc tính animation-fill-mode quyết định trạng thái của phần tử trước và sau khi animation kết thúc:
css
animation-fill-mode: none | forwards | backwards | both;
- none: Animation không ảnh hưởng đến các kiểu của phần tử trước và sau khi kết thúc.
- forwards: Giữ các kiểu của frame cuối cùng sau khi kết thúc.
- backwards: Áp dụng các kiểu của frame đầu tiên trong thời gian trễ trước khi bắt đầu.
- both: Kết hợp cả forwards và backwards.
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vietnix</title>
<style>
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.box {
width: 100px;
height: 100px;
background-color: rgb(45, 204, 156);
margin: 10px;
display: inline-block;
animation-name: slideIn;
animation-duration: 2s;
}
.box1 { animation-fill-mode: forwards; }
.box2 { animation-fill-mode: backwards; }
.box3 { animation-fill-mode: both; }
</style>
</head>
<body>
<div class=”box box1″></div>
<div class=”box box2″></div>
<div class=”box box3″></div>
</body>
</html>
- animation-play-state
Thuộc tính animation-play-state cho phép bạn kiểm soát trạng thái phát của animation:
css
animation-play-state: running | paused;
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vietnix</title>
<style>
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.box {
width: 100px;
height: 100px;
background-color: rgb(231, 243, 118);
margin: 10px;
display: inline-block;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.box1 { animation-play-state: running; } /* Animation đang chạy */
.box2 { animation-play-state: paused; } /* Animation bị dừng */
</style>
</head>
<body>
<div class=”box box1″></div>
<div class=”box box2″></div>
</body>
</html>
11 hiệu ứng Animation CSS phổ biến
Dưới đây là 11 hiệu ứng Animation CSS phổ biến giúp biến giao diện tĩnh trở nên sống động, tạo điểm nhấn độc đáo và mang lại trải nghiệm người dùng thú vị hơn.
1. Hiệu ứng văn bản nhấp nháy (Text Animation CSS)
Hiệu ứng animation trên chữ giúp nội dung trên web trở nên sống động và thu hút sự chú ý của người dùng. Các hiệu ứng như chữ nhảy, chữ xoay, chữ mờ dần,… sẽ làm tăng tính thẩm mỹ cho web.
2. Hiệu ứng màu sắc (Color Animation CSS)
Hiệu ứng chuyển đổi màu sắc của các yếu tố trên trang web. Thường được sử dụng để tạo sự chuyển tiếp giữa các trạng thái khác nhau của nút bấm, làm nổi bật phần nội dung quan trọng.
3. Hiệu ứng trượt vào (Slide-in Animation CSS)
Chuyển động khiến các yếu tố trên trang web trượt vào từ một cạnh màn hình. Bạn có thể tùy chỉnh hướng trượt, tốc độ trượt và độ trễ.
4. Hiệu ứng xoay (Rotate Animation CSS)
Tạo ra các chuyển động xoay ấn tượng cho phần tử. Bạn có thể dễ dàng tùy chỉnh góc xoay, hướng xoay và tốc độ xoay.
5. Hiệu ứng sóng (Wave Animation CSS)
Mang đến sự sống động và nhịp nhàng cho trang web, thường được sử dụng trong thiết kế banner hay làm nền cho các khối nội dung.
6. Hiệu ứng phát sáng (Glow Animation CSS)
Hỗ trợ làm nổi bật các yếu tố như nút bấm, biểu tượng hay đường viền, giúp trang web trở nên sinh động hơn.
7. Hiệu ứng nảy (Bounce Animation CSS)
Mô phỏng chuyển động nảy lên xuống hoặc di chuyển theo quỹ đạo hình sin cho phần tử, thường thấy trong thời gian chờ tải trang web.
8. Hiệu ứng xuất hiện từ từ (Fade-in Animation CSS)
Giúp phần tử xuất hiện từ trạng thái trong suốt đến hoàn toàn hiển thị. Hiệu ứng này thể hiện sự nhẹ nhàng và thanh lịch.
9. Hiệu ứng hover (Hover Animation CSS)
Kích hoạt khi người dùng di chuột qua một yếu tố nhất định. Có thể là thay đổi màu sắc, kích thước hoặc bất kỳ thuộc tính CSS nào khác.
10. Hiệu ứng tải vô hạn (Infinite Loading Animation CSS)
Tạo cảm giác nội dung đang được tải liên tục khi người dùng cuộn xuống. Thường được sử dụng khi tải nội dung động hoặc nội dung dài.
11. Kỹ thuật cuộn parallax (Parallax Scrolling CSS)
Tạo ảo giác về chiều sâu bằng cách di chuyển các lớp nền với tốc độ khác nhau so với các lớp tiền cảnh khi người dùng cuộn trang.
Cách tạo Animation CSS đơn giản
Để biến trang web của bạn trở nên sinh động hơn, hãy thực hiện theo 3 bước cơ bản dưới đây:
Bước 1: Chọn keyframes cho animation
Sử dụng quy tắc @keyframes để đặt tên cho animation và xác định các thuộc tính CSS mà bạn muốn đối tượng hiển thị.
@keyframes VietnixAnimation {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
Bước 2: Thiết lập thuộc tính animation-name và animation-duration
Liên kết các keyframes với phần tử HTML thông qua các thuộc tính animation-name và animation-duration.
.element {
animation-name: VietnixAnimation;
animation-duration: 3s; /* Animation lasts 3 seconds */
}
Bước 3: Thiết lập các thuộc tính animation khác
Thiết lập các thuộc tính khác như animation-timing-function, animation-delay, animation-iteration-count, và animation-direction để tinh chỉnh thêm hiệu ứng.
.element {
animation-name: VietnixAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out; /* Smooth acceleration and deceleration */
animation-delay: 2s; /* Wait 2 seconds before starting animation */
animation-iteration-count: infinite; /* Repeat animation infinitely */
animation-direction: alternate; /* Animation runs forward then reverses */
animation-fill-mode: forwards; /* Keep the final state after the animation ends */
animation-play-state: running; /* Animation runs normally */
}
Câu hỏi thường gặp
Khi nào Animation CSS không hoạt động?
Animation CSS có thể không hoạt động trong một số trường hợp sau:
- Thiếu thuộc tính bắt buộc, gồm animation-name và animation-duration.
- Rule @keyframes chưa khai báo.
- Tên trong @keyframes không khớp với animation-name.
- Thiếu animation-fill-mode.
- CSS không hỗ trợ animation.
- Trình duyệt không hỗ trợ animation đó.
- Sai thứ tự giá trị shorthand CSS.
Animation CSS và Transition CSS có gì khác nhau?
Mặc dù Animation và Transition đều là hiệu ứng hình ảnh trong CSS, nhưng chúng khác nhau về trạng thái, cách kích hoạt, vòng lặp, chiều lặp và độ phức tạp:
- Trạng thái: Animation có thể chỉ định thêm các trạng thái trung gian, trong khi Transition chỉ có trạng thái bắt đầu và kết thúc.
- Cách kích hoạt: Transition chỉ xảy ra khi có sự thay đổi trạng thái, còn Animation có thể tự động chạy mà không cần kích hoạt.
- Vòng lặp: Transition phản ứng khi trạng thái thay đổi, trong khi Animation có thể lặp lại vô hạn.
- Chiều lặp: Animation CSS có thể chạy theo chiều thuận, ngược hoặc luân phiên giữa hai chiều.
- Độ phức tạp: Animation CSS thường dài dòng và khó viết hơn so với Transition.
Tóm lại
Animation CSS là công cụ mạnh mẽ giúp tạo ra những trải nghiệm web sống động và hấp dẫn. Với những kiến thức cơ bản và chi tiết về các thuộc tính của Animation CSS, hy vọng bạn sẽ tự tin áp dụng vào các dự án của mình. Trong tương lai, Animation CSS chắc chắn sẽ tiếp tục phát triển, mở ra nhiều cơ hội mới cho thiết kế web.
