CSS Animation Builder (Visual)

CSS Animation 101

CSS animation gồm 2 phần: @keyframes định nghĩa các bước, và property animation áp dụng vào element.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 0.5s ease-out forwards;
}

Animation properties

• duration: thời gian (s/ms). 0.3-0.6s cho UI transition; 1-2s cho hero animation.
• timing-function (easing): tốc độ thay đổi.
  • ease: chậm-nhanh-chậm (mặc định).
  • ease-out: nhanh đầu, chậm cuối — natural cho enter animation.
  • ease-in: chậm đầu, nhanh cuối — exit animation.
  • linear: đều — dùng cho rotate, progress bar.
  • cubic-bezier(0.68, -0.55, 0.265, 1.55): overshoot bouncy.
• delay: chờ trước khi chạy.
• iteration-count: số lần lặp. infinite = lặp mãi.
• direction: normal / reverse / alternate / alternate-reverse.
• fill-mode: forwards giữ frame cuối, backwards giữ frame đầu trước khi chạy.

Tip thực tế

• Page enter: fadeIn 0.4s + slideUp 0.5s ease-out forwards.
• Toast notification: slideDown 0.3s ease-out + fadeOut sau 3s.
• Loading spinner: spin 1s linear infinite.
• Heartbeat / pulse: pulse 1.5s ease-in-out infinite — alert quan trọng.
• Shake on error: shake 0.4s — dùng cho form validation fail.
• Performance: chỉ animate transform + opacity để GPU-accelerated. Tránh animate width, top, margin (CPU expensive).