Frontend hay gặp- transition: nội suy giữa hai trạng thái — giá trị hiện tại và giá trị mới — khi có gì đó kích hoạt (hover, đổi class, thêm/bớt inline style).
Cần một "cú hích" để chạy, chỉ đi một chiều tại một thời điểm, và không tự lặp.
.btn { transition: background 0.2s ease; }
.btn:hover { background: #333; }- animation + @keyframes: định nghĩa chuỗi nhiều mốc (0%, 50%, 100%), tự chạy không cần trigger, hỗ trợ lặp (infinite), đảo chiều (alternate), delay, và tạm dừng.
Kiểm soát chi tiết hơn.
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.dot { animation: pulse 1s ease-in-out infinite; }Chọn nhanh: hiệu ứng hai trạng thái, do tương tác (hover, mở/đóng, đổi màu) → transition; chuỗi nhiều bước, tự chạy, lặp (spinner, skeleton loading, pulse) → animation.
Hiệu năng (chung cho cả hai): ưu tiên animate transform và opacity — chúng chạy trên compositor, không gây reflow/repaint; tránh animate width, top, left, margin. Nhớ tôn trọng prefers-reduced-motion.