CSS Animation Keyframes Advanced

Ringkasan

@keyframes + animation membuat animasi tanpa JS. Penguasaan timing function & properti penting agar halus & murah.

Konsep Dasar

• @keyframes nama { from{} to{} } atau 0%..100%.
• animation: name dur easing delay iterasi direction fill-mode.
• easing: ease, linear, cubic-bezier(.4,0,.2,1), steps().
• Properti bisa dianimasikan: transform, opacity (murah); hindari width/height/top (mahal).
• prefers-reduced-motion — matikan animasi untuk aksesibilitas.

Cara Kerja / Struktur

css

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.card { animation: fadeIn .3s ease-out both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

Catatan Implementasi

• Animasi hanya transform/opacity → GPU-friendly, tidak trigger layout.
• steps() untuk sprite/efek diskrit.
• Jangan animasi property layout (reflow mahal).

Kesalahan Umum

• Animasi height/top → lag.
• Lupa prefers-reduced-motion (ganggu user sensitif).

Glosarium

• Keyframes: titik kunci animasi.
• prefers-reduced-motion: preferensi pengguna hindari gerakan.

Referensi

• CSS Transitions dan Animations