CSS Animation Tips

Tạo animations mượt mà và hiệu quả với CSS.

Keyframe Animations

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

Performance Tips

1. Sử dụng transform thay vì position
2. Tránh animate layout properties
3. Dùng will-change cho heavy animations

.optimized-animation {
  will-change: transform;
  transform: translateZ(0); /* Enable hardware acceleration */
}

Best Practices:

• Keep animations under 16ms per frame
• Use CSS transforms when possible
• Test on low-end devices

Pro tip: Always test animations on actual devices, not just desktop!