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