🥹Difference between animation and transition in CSS

https://www.geeksforgeeks.org/difference-between-animation-and-transition-in-css/

Sự khác biệt giữa transition và animation:

Chuyển tiếp	Hoạt hình
Chuyển tiếp không thể lặp lại (Bạn có thể khiến chúng thực hiện điều đó nhưng chúng không được thiết kế cho mục đích đó).	Hoạt ảnh không gặp vấn đề gì khi lặp lại.
Quá trình chuyển đổi cần có tác nhân kích hoạt giống như khi di chuột.	Hoạt hình chỉ bắt đầu. Chúng không cần bất kỳ nguồn kích hoạt bên ngoài nào.
Chuyển tiếp rất dễ thực hiện trong JavaScript.	Hoạt ảnh khó thực hiện trong JavaScript. Cú pháp để thao tác khung hình chính và gán giá trị mới cho nó rất phức tạp.
Chuyển tiếp làm cho một đối tượng chuyển động từ điểm này sang điểm khác.	Hoạt hình cho phép bạn xác định Khung hình chính thay đổi tùy theo trạng thái với nhiều thuộc tính và khung thời gian khác nhau.
Sử dụng transition để thao tác giá trị bằng JavaScript.	Tính linh hoạt được cung cấp nhờ có nhiều khung hình chính và vòng lặp dễ dàng.
Chạy về phía trước khi kích hoạt và chạy ngược lại khi kích hoạt được gỡ bỏ	Có thể chạy về phía trước, lùi lại hoặc thay đổi hướng
Dễ sử dụng hơn với JavaScript	Khó sử dụng hơn với JavaScript

Khi nào sử dụng hoạt hình so với chuyển tiếp

Chúng ta hãy cùng tóm tắt lại những trường hợp sử dụng lý tưởng khi sử dụng hoạt ảnh thay cho chuyển tiếp:

• Tạo ra chuỗi chuyển động phức tạp hơn

• Có hiệu ứng xảy ra ngay khi trang được tải

• Chỉ sử dụng CSS (không có JavaScript)

• Thiết kế lớp phủ hướng dẫn cho UI