Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến

Animation CSS là một trong những tính năng được các front end developer rất ưa chuộng bởi nó giúp website trở nên hiện đại, thu hút hơn. Trong bài viết này, hãy cùng ITviec tìm hiểu về các hiệu ứng và cách thiết lập animation CSS cho từng thành phần website.

Đọc bài viết này để hiểu rõ hơn:

• Animation CSS là gì? 
• Cú pháp, thuộc tính và lợi ích khi sử dụng animation CSS
• Các loại animation trong CSS
• Các bước tạo animation trong CSS
• Câu hỏi thường gặp về animation CSS

Animation CSS là gì?

Animation CSS là một tính năng cho phép lập trình viên web tạo hiệu ứng chuyển động cho các phần tử HTML mà không cần sử dụng JavaScript hay Flash.

Animation CSS làm thay đổi giao diện và hành vi của nhiều thành phần khác nhau trên trang web. Chúng được định nghĩa bằng quy tắc @keyframes. Keyframe là những điểm đánh dấu trong chuỗi animation, biểu thị trạng thái của phần tử tại các thời điểm cụ thể. Từ đó có thể hiểu rằng, quy tắc @keyframe chỉ định các thuộc tính animation (hoạt ảnh) của thành phần và các khoảng thời gian cụ thể mà các thuộc tính đó cần thay đổi.

So với các kỹ thuật animation theo script truyền thống, animation CSS có 3 ưu điểm chính:

• Dễ sử dụng: Animation CSS sử dụng cú pháp đơn giản và trực quan, dễ hiểu và dễ sử dụng ngay cả đối với những người mới bắt đầu. Hiện nay có nhiều công cụ hỗ trợ tạo Animation CSS trực quan, giúp việc tạo animation trở nên dễ dàng hơn.
• Hiệu năng tốt: Animation CSS chạy mượt mà ngay cả khi hệ thống hoạt động ở mức trung bình. Trong khi đó, animation JavaScript đơn giản thường có hiệu năng kém. Trình duyệt có thể sử dụng các kỹ thuật như bỏ qua khung hình (frame-skipping) để animation luôn chạy trơn tru nhất có thể.
• Tối ưu hóa hiệu suất: Để kiểm soát chuỗi animation, trình duyệt có thể tối ưu hóa hiệu suất và tiết kiệm tài nguyên bằng cách giảm tần suất cập nhật animation trên các tab không đang hiển thị.

Đọc thêm các bài thuộc chuỗi bài viết CSS:

• Cursor CSS là gì: Cú pháp, phân loại và cách tạo Cursor CSS
• CSS selector là gì? Top 10 CSS selector phổ biến nhất hiện nay
• Flex CSS là gì? Giải đáp chi tiết 13 thuộc tính trong Flexbox CSS
• Position CSS là gì? Hiểu rõ 5 giá trị của thuộc tính Position CSS

Thuộc tính của animation CSS

Để tạo một chuỗi animation CSS, bạn cần sử dụng thuộc tính animation hoặc các thuộc tính phụ của nó để định kiểu cho phần tử bao gồm thời gian, thời lượng và các chi tiết khác về cách chuỗi animation diễn ra.

Cú pháp:

 /*property-name*/: /*value*/;

Trong đó:

• property-name là tên thuộc tính animation CSS.

• value là giá trị tương ứng của các thuộc tính animation CSS đó.

Tất cả đã được ITviec hệ thống chi tiết trong nội dung bên dưới đây.

Thuộc tính	Mô tả	Giá trị
animation-name	Dùng để chỉ định tên của keyframe (@keyframes) mô tả animation.	keyframename | none | initial | inherit
animation-duration	Thiết lập thời gian để hoàn thành một chu kỳ animation.	time | initial | inherit
animation-timing-function	Xác định cách animation chuyển đổi giữa các keyframe.	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps (int, start | end) | cubic-bezier (n, n, n, n) | initial | inherit
animation-delay	Thiết lập độ trễ bắt đầu của animation.	time | initial | inherit
animation-iteration-count	Xác định số lần lặp lại của animation.	number | infinite | initial | inherit
animation-direction	Xác định hướng chạy của animation.	normal | reverse | alternate | alternate-reverse | initial | inherit
animation-fill-mode	Xác định cách áp dụng kiểu CSS trước và sau khi animation chạy.	none | forwards | backwards | both | initial | inherit
animation-play-state	Điều khiển trạng thái chạy của animation, cho phép tạm dừng hoặc tiếp tục.	paused | running | initial | inherit

animation-name

Thuộc tính animation-name xác định tên của keyframe. Khi đặt tên cho animation, bạn có thể sử dụng các ký tự a đến z, số 0 đến 9, dấu gạch dưới và dấu gạch ngang. 

Cú pháp:

animation-name: keyframename | none | initial | inherit;

Trong đó:

• none: Đây là giá trị mặc định. Nó được sử dụng để chỉ định rằng không có hoạt ảnh nào được áp dụng cho phần tử.
• initial: Giá trị này được sử dụng để đặt thuộc tính animation-name về giá trị mặc định của nó (thường là none).
• inherit: Giá trị này được sử dụng để thừa hưởng giá trị của thuộc tính animation-name từ phần tử cha.

Nếu có nhiều keyframe mô tả các hoạt ảnh cần áp dụng cho một thành phần, thì bạn cần xác định nhiều giá trị cho thuộc tính animation-name và phân tách chúng bằng dấu cách và dấu phẩy.

animation-duration

Thuộc tính animation-duration xác định thời gian của chuỗi animation. Mặc dù chuỗi animation này có thể lặp lại mãi mãi, nhưng nó vẫn cần được chỉ định thời gian để hoàn thành một chu kỳ. Thuộc tính animation-duration có thể có giá trị bằng 0 hoặc giá trị dương bất kỳ. Cú pháp:

animation-duration: time | initial | inherit;

Trong đó:

• time: Xác định thời gian hoàn thành một chu kỳ hoạt ảnh. Có thể sử dụng giây (s) hoặc mili giây (ms).
• initial: Giá trị mặc định là 0, nghĩa là không có hoạt ảnh nào diễn ra.
• inherit: Thừa hưởng giá trị của thuộc tính từ phần tử cha.

Lưu ý:

• Thuộc tính animation-duration không ảnh hưởng đến số lần lặp lại của animation. Số lần lặp lại được xác định bởi thuộc tính animation-iteration-count.
• Giá trị 0s cho animation-duration sẽ không tạo ra hiệu ứng chuyển động nào.

animation-timing-function

Thuộc tính animation-timing-function xác định cách thức animation chuyển đổi giữa các keyframes. CSS cung cấp một số giá trị đặt trước cho thuộc tính này, giúp bạn dễ dàng tạo ra các hiệu ứng chuyển động 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) | initial | inherit;

Trong đó:

• ease (mặc định): Hoạt ảnh bắt đầu chậm, sau đó tăng tốc và cuối cùng kết thúc chậm.
• linear: Hoạt ảnh diễn ra với tốc độ đều đặn từ đầu đến cuối.
• ease-in: Hoạt ảnh bắt đầu chậm.
• ease-out: Hoạt ảnh diễn ra bình thường nhưng kết thúc chậm.
• ease-in-out: Hoạt ảnh bắt đầu và kết thúc chậm.
• step-start: Hoạt ảnh “nhảy” ngay lập tức đến trạng thái cuối cùng. Ví dụ, animation được đặt bắt đầu ở 0px, sau đó di chuyển sang phải 150px và thời lượng là 4 giây. Thay vì dần dần di chuyển sang phải trong khoảng thời gian đó, nó sẽ ngay lập tức nhảy sang phải 150px.
• step-end: Hoạt ảnh vẫn ở trạng thái ban đầu, cho đến khi kết thúc chu kỳ thì nó sẽ ngay lập tức chuyển sang trạng thái cuối cùng. Sử dụng giả thuyết tương tự ở trên, hoạt ảnh sẽ duy trì ở mức 0px, cho đến khi hết chu kỳ 4s thì nhảy ngay lập tức sang phải 150px.
• steps (int, start | end): Tạo hiệu ứng chuyển động theo từng bước (giật cục). Tham số int xác định số bước chuyển đổi, start hoặc end xác định trạng thái bắt đầu của hiệu ứng chuyển động theo từng bước.
• cubic-bezier (n, n, n, n): Cho phép bạn định nghĩa đường cong Bezier tùy chỉnh để kiểm soát chính xác tốc độ chuyển động của hoạt ảnh tại mỗi thời điểm. Giá trị n nằm trong khoảng 0 đến 1, đại diện cho tỷ lệ phần trăm của thời gian hoạt ảnh. Để hiểu rõ hơn, bạn có thể xem ví dụ này.
• initial: Đặt thuộc tính về giá trị mặc định (thường là ease).
• inherit: Thừa hưởng giá trị của thuộc tính từ phần tử cha.

animation-delay

Thuộc tính animation-delay cho phép trì hoãn thời gian bắt đầu của một hoạt ảnh.

Cú pháp:

animation-delay: time | initial | inherit;

Trong đó:

• time: Xác định thời gian trì hoãn (tùy chọn). Có thể sử dụng giây (s) hoặc mili giây (ms).
• initial: Giá trị mặc định là 0, nghĩa là hoạt ảnh bắt đầu ngay lập tức.
• inherit: Thừa hưởng giá trị của thuộc tính từ phần tử cha.

animation-iteration-count

Thuộc tính này được dùng để chỉ định số lần lặp lại của hiệu ứng animation.

Cú pháp:

animation-iteration-count: number | infinite | initial | inherit;

Trong đó:

• number: Giá trị mặc định là 1, thường được dùng để xác định số lần phát hiệu ứng. Lưu ý, giá trị này phải là số nguyên dương.
• infinite: Giá trị này dùng để lặp lại hiệu ứng animation vô tận.
• initial: Giá trị này dùng để đặt thuộc tính về mặc định.
• inherit: Giá trị này dùng để kế thừa thuộc tính từ phần tử cha.

animation-direction

Thuộc tính này có chức năng xác định hướng của hiệu ứng animation, chẳng hạn chạy theo chiều thuận, chiều ngược hoặc lặp lại theo chu kỳ.

Cú pháp:

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

Trong đó:

• normal: Đây là hiệu ứng mặc định chạy theo chiều thuận (từ trạng thái đầu tiên đến trạng thái cuối cùng được xác định trong keyframe).
• reverse: Hiệu ứng chạy theo chiều ngược lại (từ trạng thái cuối cùng đến trạng thái đầu tiên được xác định trong keyframe).
• alternate: Hiệu ứng chạy thuận một lần, rồi đảo ngược lại và lặp lại theo chu kỳ.
• alternate-reverse: Hiệu ứng chạy ngược một lần, rồi đảo lại thành thuận.
• initial: Đặt thuộc tính về giá trị mặc định (normal).
• inherit: Kế thừa giá trị của thuộc tính từ phần tử cha.

animation-fill-mode

Hiệu ứng animation mặc định chỉ ảnh hưởng đến phần tử trong khoảng thời gian giữa khung hình đầu tiên và khung hình cuối cùng. Thuộc tính animation-fill-mode cho phép bạn thay đổi hành vi này.

Cú pháp:

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

Trong đó:

• none: Là giá trị mặc định, không được áp dụng cho phần tử trước hoặc sau khi chạy. Trạng thái của phần tử sẽ trở lại như ban đầu khi animation kết thúc.
• forwards: Sau khi kết thúc animation, phần tử sẽ giữ lại các thuộc tính của khung hình cuối cùng.
• backwards: Thiết lập phần tử về các giá trị của khung hình đầu tiên trước khi bắt đầu animation. Nghĩa là trạng thái của phần tử sẽ trở lại như ban đầu trước khi animation bắt đầu.
• both: Kết hợp forwards và backwards. Phần tử sẽ giữ lại trạng thái của khung hình cuối cùng sau khi animation kết thúc và về trạng thái khung hình đầu tiên trước khi animation bắt đầu.
• initial: Đặt thuộc tính về giá trị mặc định (none).
• inherit: Kế thừa giá trị của thuộc tính từ phần tử cha.

animation-play-state

Thuộc tính animation-play-state giúp điều khiển trạng thái chạy của hiệu ứng animation, cụ thể là tạm dừng hoặc tiếp tục.

Cú pháp:

animation-play-state: paused | running | initial | inherit;

Trong đó:

• paused: Tạm dừng hiệu ứng animation. Khi animation ở trạng thái paused, nó sẽ không tiếp tục chạy cho đến khi được kích hoạt lại.
• running: Là giá trị mặc định, dùng để chỉ hiệu ứng animation đang chạy.
• initial: Đặt thuộc tính về giá trị mặc định (running).
• inherit: Kế thừa giá trị của thuộc tính từ phần tử cha.

Các hiệu ứng animation CSS thường dùng

Text Animation CSS

Text animation cho phép bạn thêm các hiệu ứng động cho phần chữ trên trang web như hiệu ứng cầu vồng, bóng đổ, glitch, gooey,… 

Xem ví dụ: Hiệu ứng Text Animation viết tay rất phổ biến.

Color Animation CSS

Hiệu ứng này thường được dùng để tạo các chuyển đổi màu mượt mà và sống động cho các phần tử trên trang web. Hiệu ứng Animation CSS này cho phép bạn thay đổi màu sắc của một phần tử theo thời gian, tạo ra các hiệu ứng thị giác bắt mắt.

Bạn có thể áp dụng hiệu ứng này cho văn bản, nút, đường viền và các yếu tố khác trên trang… khiến chúng trở nên bắt mắt nhằm thu hút khách truy cập đến một điểm cụ thể trên trang.

Xem ví dụ: Hiệu ứng Color Animation đổi màu background.

Slide-in Animation CSS

Slide-in animation còn gọi là hiệu ứng trượt vào, có nghĩa là nó di chuyển một phần tử từ vị trí ẩn bên ngoài màn hình vào vị trí hiển thị trong màn hình. Có nhiều loại slide-in animation khác nhau như slide-in từ trên xuống, slide-in từ dưới lên, slide-in từ trái sang phải, slide-in từ phải sang trái.

Xem ví dụ: Các hiệu ứng Slide-in Animation.

Rotate Animation CSS

Rotate animation (hiệu ứng xoay) là một kỹ thuật trong thiết kế web sử dụng các thuộc tính CSS để tạo hiệu ứng xoay một phần tử theo một góc cụ thể. Bạn có thể sử dụng để mô phỏng các chuyển động thực tế như xoay bánh xe, cánh quạt hay kim đồng hồ trong mặt phẳng 2D hoặc 3D.

Xem ví dụ: Hiệu ứng Rotate Animation

Wave Animation CSS

Wave animation (hiệu ứng sóng) sử dụng các thuộc tính CSS để tạo ra các chuyển động mô phỏng sóng biển, gợn nước hoặc các hình dạng lượn sóng khác nhau trên trang web. 

Để tạo hiệu ứng sóng CSS, bạn cần tạo nhiều đối tượng HTML để đại diện cho các con sóng. Sau đó, áp dụng hiệu ứng xoay cho từng con sóng với các màu nền khác nhau và các giá trị khác nhau cho thuộc tính animation-timing. 

Xem ví dụ: Hiệu ứng sóng Wave Animation.

Glow Animation CSS

Glow animation là hiệu ứng phát sáng hoặc lueur xung quanh một phần tử trên trang web. Hiệu ứng này thường được sử dụng để làm nổi bật các thành phần quan trọng như các nút, đường viền, hoạt động tải, hoạt động di chuột,…

Xem ví dụ: Hiệu ứng Glow Animation khi di chuyển con trỏ chuột vào button.

Bounce Animation CSS

Bounce animation (hiệu ứng nảy) là kỹ thuật sử dụng các thuộc tính CSS thiết lập chuyển động nảy lên xuống hoặc di chuyển theo quỹ đạo hình sin cho phần tử. Đây là hiệu ứng thường thấy trong thời gian chờ đợi tải trang web.

Xem ví dụ: Hiệu ứng Bounce Animation thể hiện trạng thái tải trang.

Fade-in Animation CSS

Fade-in animation là hiệu ứng một phần tử trên trang web dần dần xuất hiện từ trạng thái trong suốt sang trạng thái hiển thị hoàn toàn. Hiệu ứng này thường được sử dụng để tạo cảm giác bí ẩn, hồi hộp, hoặc làm nổi bật các nội dung quan trọng.

Xem ví dụ: Các hiệu ứng Fade-in Animation.

Hover Animation CSS

Hover animation là kỹ thuật sử dụng các thuộc tính CSS để tạo ra các hiệu ứng thị giác khi người dùng di chuột qua một phần tử trên trang web. Bạn có thể tạo hiệu ứng phóng to, lật, xoay hoặc thậm chí dừng phát cho các thành phần khi di chuột qua.

Ví dụ:

Xem ví dụ: Hiệu ứng Hover Animation khi di chuyển chuột qua button

Infinite Loading Animation CSS

Infinite Loading Animation (hiệu ứng tải vô hạn) là kỹ thuật lập trình animation để mô phỏng hành động tải nội dung trang web một cách liên tục khi người dùng cuộn xuống. 

Infinite Loading Animation chỉ là một trong năm hiệu ứng tải trang web mà bạn có thể tạo bằng CSS để giúp giảm thiểu cảm giác chờ đợi của người dùng. Vì loại animation này cho phép khách truy cập biết trang đang tải mà không cần chỉ định thời gian chờ đợi cụ thể, nên nó hoàn hảo cho những trường hợp thời gian tải không xác định.

Xem ví dụ: Hiệu ứng Infinite Loading Animation

Parallax Scrolling CSS

Parallax scrolling là một kỹ thuật thị giác trong đó các thành phần ở nền di chuyển với tốc độ khác so với các thành phần ở phía trước khi bạn cuộn trang. Điều này tạo ra ảo giác về chiều sâu hoặc “hiệu ứng 3D giả” nhằm mục đích làm cho trải nghiệm web của khách truy cập thú vị hơn.

Xem ví dụ: Hiệu ứng Parallax Scrolling

Làm thế nào để tạo Animation CSS?

Bạn có thể thay đổi nhiều thuộc tính CSS khác nhau với tần suất tuỳ ý.

Cú pháp:

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

Trong đó:

• name: Tên của animation đã được định nghĩa trong quy tắc @keyframes.
• duration: Thời gian diễn ra toàn bộ animation.
• timing-function: Tốc độ thay đổi của animation.
• delay: Thời gian trì hoãn trước khi bắt đầu animation.
• iteration-count: Số lần animation được lặp lại.
• direction: Chiều hướng của animation (chạy bình thường, đảo ngược, v.v.).
• fill-mode: Xác định trạng thái của phần tử sau khi animation kết thúc.
• play-state: Kiểm soát việc tạm dừng hoặc tiếp tục animation.

Bước 1: Xác định keyframe của animation

Bước đầu tiên trong việc tạo animation CSS là xác định các keyframe. Để xác định keyframe, bạn sử dụng quy tắc @keyframes với các bước sau: 

• Đặt tên cho animation: Tên này sẽ được sử dụng để tham chiếu animation trong bước tiếp theo.
• Xác định phần trăm: Mỗi phần trăm đại diện cho một thời điểm trong chuỗi animation. Ví dụ: 0% là điểm bắt đầu, 50% là điểm chính giữa và 100% là điểm kết thúc.
• Thiết lập thuộc tính CSS: Bạn cần xác định các thuộc tính CSS mong muốn cho phần tử tại thời điểm đó. 

Số lượng keyframe phụ thuộc vào độ phức tạp của animation. Ví dụ, một animation đơn giản chỉ có thể có hai keyframe (điểm bắt đầu và điểm kết thúc), trong khi một animation phức tạp hơn có thể có nhiều keyframe hơn để tạo ra các chuyển động mượt mà và chi tiết.

Ví dụ:

@keyframes itviecAnimation {

  0% {

    transform: rotate(0deg); /* Vị trí ban đầu */

  }

  50% {

    transform: rotate(180deg); /* Xoay 180 độ */

  }

  100% {

    transform: rotate(360deg); /* Quay trở lại vị trí ban đầu */

  }

}

Lưu ý:

– Bạn có thể sử dụng bất kỳ thuộc tính CSS nào trong keyframe.

– Bạn có thể sử dụng nhiều keyframe hơn để tạo ra các animation phức tạp hơn.

– Thứ tự của keyframe xác định thứ tự các trạng thái được áp dụng cho phần tử trong animation.

– Keyframe đầu tiên và cuối cùng không cần thiết phải giống nhau.

Bước 2: Xác định các thuộc tính animation-name và animation-duration

Các thuộc tính animation gán các keyframes cho một thành phần cụ thể và xác định animation cho các thành phần đó. Ở bước này, bạn cần xác định animation-name và animation-duration như những hướng dẫn của ITviec trước đó.

Ví dụ:

.element {

  animation-name: itviecAnimation; /* Tham chiếu đến tên animation đã định nghĩa trong @keyframes */

  animation-duration: 2s; /* Animation diễn ra trong 2 giây */

}

Bước 3: Xác định các thuộc tính animation khác mà bạn cần

Bên cạnh các thuộc tính animation-name và animation-duration, còn có các thuộc tính animation khác mà bạn có thể sử dụng để tạo các hiệu ứng phức tạp. Tất cả thuộc tính này đã được ITviec giải đáp chi tiết ở phần 3 của bài viết.

Ví dụ:

.element {

  animation-name: itviecAnimation;

  animation-duration: 2s;

  animation-timing-function: ease-in-out; /* Animation tăng tốc và giảm tốc mượt mà */

  animation-delay: 1s; /* Chờ 1 giây trước khi bắt đầu animation */

  animation-iteration-count: infinite; /* Lặp lại animation vô hạn */

  animation-direction: alternate; /* Animation chạy thuận một lần rồi đảo ngược và lặp lại theo chu kỳ */

  animation-fill-mode: forwards; /* Giữ trạng thái cuối cùng sau khi animation kết thúc */

  animation-play-state: running; /* Animation chạy bình thường */

}

Câu hỏi thường gặp về Animation CSS

Trường hợp nào Animation CSS không hoạt động?

Nếu animation không hoạt động hoặc không như mong đợi, bạn hãy thử kiểm tra xem mình có đang mắc phải một trong những lỗi dưới đây không nhé.

• Thuộc tính animation-name hoặc animation-duration không được khai báo: Đây là hai thuộc tính bắt buộc phải được thiết lập. Do đó, nếu không được khai báo, animation sẽ không hiển thị.

• Rule @keyframes không được khai báo: Animation chỉ được chạy khi các thuộc tính animation được áp dụng. Các giá trị này được chỉ định bằng keyframes. Nếu chúng không được chỉ định trong rule @keyframes, animation sẽ không hoạt động.

• Tên của rule @keyframes không khớp với tên của animation: Tên của rule @keyframes phải khớp với giá trị của thuộc tính animation-name. Nếu không, trình duyệt sẽ không thể khớp animation với khai báo keyframes của nó và animation sẽ không hiển thị.

• Thuộc tính animation-fill-mode không được thiết lập: Theo mặc định, animation CSS sẽ đưa một thành phần trở lại trạng thái ban đầu sau khi chu kỳ animation kết thúc. Điều này có thể khiến animation trông như bị lỗi. Để tránh điều này, bạn có thể thiết lập animation-fill-mode.

• Thuộc tính CSS không phải là thuộc tính có thể thiết lập animation: Trong trường hợp này, bạn cần sử dụng một thuộc tính CSS khác để đạt được hiệu ứng tương tự.

• Trình duyệt không hỗ trợ animation CSS: Nếu animation không hoạt động, rất có thể vấn đề nằm ở trình duyệt chứ không phải code. Trong trường hợp đó, bạn sẽ cần chuyển sang trình duyệt mới hoặc cập nhật trình duyệt.

• Thứ tự các giá trị cho thuộc tính shorthand CSS không đúng: Shorthand CSS lý tưởng để viết CSS gọn gàng hơn, nhưng nó có thể khó viết hơn vì thứ tự các giá trị rất quan trọng. Ví dụ: giá trị “time” đầu tiên sẽ được gán cho thuộc tính animation-duration và giá trị thứ hai sẽ được gán cho thuộc tính animation-delay, do đó bạn không nên trộn lẫn các giá trị đó.

Animation CSS khác với Transition CSS như thế nào?

Mặc dù Animation và Transition đều là các hiệu ứng hình ảnh trong CSS nhưng chúng vẫn có những sự khác biệt ở một số tiêu chí như 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: Giống như Transition, Animation có thể xác định trạng thái bắt đầu và kết thúc, nhưng nó cũng có thể chỉ định số lượng trạng thái trung gian để tạo hiệu ứng phức tạp hơn.
• Kích hoạt: Animation có thể được kích hoạt giống như Transition, nhưng nó cũng có thể chạy mà không cần kích hoạt.
• Lặp: Trong khi Transition chỉ phản ứng khi được bật hoặc tắt, Animation có thể lặp lại hữu hạn hoặc vô hạn.
• Chiều lặp: Lặp trong 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 Transition, nhưng nó chắc chắn đơn giản hơn so với code JavaScript tương đương.

Tổng kết Animation CSS

Bài viết đã mang đến những thông tin hữu ích về Animation CSS. Bằng cách hiểu rõ và ứng dụng thành thạo các hiệu ứng này, bạn có thể tạo ra những trang web ấn tượng, nâng cao trải nghiệm người dùng và thể hiện sự chuyên nghiệp trong thiết kế web. Hãy bắt đầu tìm hiểu và học hỏi ngay từ bây giờ để hành trình phát triển web của bạn thuận lợi và hiệu quả hơn nhé.