Animation CSS là gì? Hướng dẫn chi tiết từ cơ bản đến nâng cao

Animation CSS là gì?

Animation CSS là một công cụ tạo ra các hiệu ứng chuyển động mượt mà và hấp dẫn cho các yếu tố trên trang web. Cơ chế hoạt động của Animation CSS dựa trên 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. Bằng cách thay đổi liên tục các keyframes, ta có thể tạo ra nhiều loại chuyển động khác nhau cho web.

Quy tắc keyframe animation CSS

Animation CSS sử dụng quy tắc @keyframes, đóng vai trò chỉ định rõ các thuộc tính cần thay đổi và thời điểm chính xác mà sự thay đổi diễn ra. 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 đó.

8 thuộc tính của Animation CSS

1. animation-name

Cú pháp:

animation-name: none | keyframe-name; 

Trong đó:

• none: Không có animation.
• keyframe-name: Tên của @keyframes để xác định các bước của animation.

2. animation-duration

Cú pháp:

animation-duration: time; 

Trong đó:

• time: Thời gian để hoàn thành một chu kỳ của animation (ví dụ: 5s, 600ms).

Lưu ý:

• animation-duration không ảnh hưởng đến số lần lặp lại, được xác định bởi animation-iteration-count.
• Giá trị 0s sẽ khiến animation không có hiệu ứng chuyển động.

3. animation-timing-function

Cho phép kiểm soát tốc độ của animation tại các thời điểm khác nhau.

Cú pháp:

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); 

Mô tả một số giá trị:

• linear: tốc độ đều
• ease: mặc định, bắt đầu chậm – nhanh – chậm
• ease-in, ease-out, ease-in-out, steps, cubic-bezier: tinh chỉnh linh hoạt tốc độ animation

Ví dụ minh họa bằng cubic-bezier được đính kèm trong nội dung HTML.

4. animation-delay

Cú pháp:

animation-delay: time; 

Trong đó:

• time: Thời gian trễ trước khi animation bắt đầu (ví dụ: 1s, 2s,...)

5. animation-iteration-count

Cú pháp:

animation-iteration-count: infinite | number; 

Trong đó:

• infinite: animation lặp vô hạn
• number: số lần lặp lại cụ thể

6. animation-direction

Cú pháp:

animation-direction: normal | reverse | alternate | alternate-reverse; 

Trong đó:

• normal: chạy theo hướng ban đầu
• reverse: chạy ngược lại
• alternate: chạy xuôi, rồi ngược
• alternate-reverse: chạy ngược, rồi xuôi

7. animation-fill-mode

Cú pháp:

animation-fill-mode: none | forwards | backwards | both; 

Trong đó:

• none: không giữ trạng thái trước hoặc sau animation
• forwards: giữ trạng thái kết thúc
• backwards: áp dụng trạng thái bắt đầu trong thời gian trễ
• both: kết hợp forwards và backwards

8. animation-play-state

Cú pháp:

animation-play-state: running | paused; 

Trong đó:

• running: animation đang chạy
• paused: animation bị tạm dừng

11 hiệu ứng Animation CSS phổ biến

Những hiệu ứng sau sẽ giúp giao diện tĩnh trở nên sống động và thu hút người dùng hơn.

1. Text Animation CSS

Hiệu ứng animation trên chữ giúp nội dung trở nên sinh động và thu hút. Bạn có thể tạo hiệu ứng chữ nhảy, xoay, mờ dần, xuất hiện từ từ,… để nhấn mạnh thông điệp quan trọng hoặc tăng tính thẩm mỹ.

2. Color Animation CSS

Color animation CSS cho phép thay đổi màu sắc một cách mượt mà. Thường dùng để làm nổi bật nút bấm, phần nội dung quan trọng hoặc tạo điểm nhấn thị giác cho giao diện.

3. Slide-in Animation CSS

Slide-in animation tạo hiệu ứng trượt vào từ cạnh màn hình. Có thể tùy chỉnh hướng, tốc độ và độ trễ để giới thiệu nội dung mới hoặc tạo bất ngờ cho người dùng.

4. Rotate Animation CSS

Hiệu ứng xoay (rotate) mô phỏng chuyển động của bánh xe, cánh quạt, kim đồng hồ,… Bạn có thể điều chỉnh góc, hướng và tốc độ xoay dễ dàng.

5. Wave Animation CSS

Hiệu ứng sóng tạo cảm giác nhịp nhàng và sinh động. Thường dùng trong banner, header, hoặc làm nền cho khối nội dung để tạo điểm nhấn.

6. Glow Animation CSS

Hiệu ứng phát sáng giúp làm nổi bật các yếu tố như nút bấm, biểu tượng, đường viền,… Nhờ đó trang web trở nên sinh động và bắt mắt hơn.

7. Bounce Animation CSS

Hiệu ứng nảy mô phỏng chuyển động lên xuống hoặc theo hình sin. Rất phù hợp khi cần gây chú ý trong thời gian chờ tải trang hoặc phản hồi tương tác.

8. Fade-in Animation CSS

Hiệu ứng xuất hiện dần từ trong suốt đến hiển thị rõ ràng. Dùng để tạo cảm giác nhẹ nhàng, thanh lịch hoặc hồi hộp, tùy theo ngữ cảnh thiết kế.

9. Hover Animation CSS

Kích hoạt khi người dùng di chuột qua phần tử. Dùng để thay đổi màu sắc, kích thước hoặc vị trí, nhằm cung cấp phản hồi trực quan, tăng khả năng tương tác.

10. Infinite Loading Animation CSS

Tạo cảm giác nội dung đang được tải liên tục. Rất hiệu quả trong các trang có nội dung động hoặc cuộn dài, giúp giảm cảm giác chờ đợi.

11. Parallax Scrolling CSS

Tạo ảo giác chiều sâu bằng cách di chuyển lớp nền chậm hơn lớp tiền cảnh khi người dùng cuộn. Giúp trang web hấp dẫn và giàu trải nghiệm hơn.

Cách tạo Animation CSS đơn giản

Bạn muốn trang web trở nên sinh động hơn bằng hiệu ứng chuyển động mượt mà? Dưới đây là 3 bước cơ bản giúp làm chủ CSS Animation.

Cú pháp tổng quát

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

Trong đó:

• name: tên keyframe animation
• duration: thời gian một chu kỳ animation
• timing-function: tốc độ thay đổi giữa các keyframe
• delay: thời gian trễ trước khi bắt đầu
• iteration-count: số lần lặp lại
• direction: hướng animation
• fill-mode: trạng thái trước/sau khi chạy
• play-state: trạng thái phát (chạy hay dừng)

Bước 1: Chọn keyframes cho animation

Để tạo keyframe, dùng quy tắc @keyframes.

• Đặt tên cho animation
• Xác định phần trăm ứng với các thời điểm trong chuỗi animation (0%, 50%, 100%)
• Thiết lập các thuộc tính CSS mong muốn (vị trí, màu, kích thước,…)

Ví dụ:

@keyframes RotateAnimation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } 

Lưu ý:

• Có thể dùng bất kỳ thuộc tính CSS nào trong keyframes.
• Tạo animation phức tạp bằng nhiều bước.
• Thứ tự keyframe xác định chuỗi trạng thái.
• 0% và 100% không cần giống nhau.

Bước 2: Thiết lập animation-name và animation-duration

Sau khi tạo keyframes, liên kết chúng với phần tử HTML bằng hai thuộc tính:

• animation-name: tên animation
• animation-duration: thời gian chạy

Ví dụ:

.element { animation-name: RotateAnimation; animation-duration: 3s; } 

Bước 3: Thiết lập các thuộc tính animation khác

Tùy chỉnh thêm bằng các thuộc tính khác như:

.element { animation-name: RotateAnimation; animation-duration: 3s; animation-timing-function: ease-in-out; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: running; } 

Lời kết

Hy vọng những kiến thức trên sẽ là nền tảng vững chắc để bạn áp dụng Animation CSS vào dự án của mình. Trong tương lai, CSS Animation chắc chắn sẽ tiếp tục phát triển và mở ra nhiều khả năng sáng tạo thú vị hơn cho thiết kế web.