Katalog Animasi CSS Murni (Zero JavaScript Bloat)

Semua animasi dibangun menggunakan CSS3 hardware accelerated murni. Ukuran total di bawah 15KB dan mematuhi aturan aksesibilitas prefers-reduced-motion.

Fade Up Entrance

Elemen bergeser naik halus dari 20px sambil memudar transparan ke nyata.

✨Fade Up Entrance

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

Scale In Pop

Elemen membesar halus dari 95% ke 100% ukuran normal.

✨Scale In Pop

@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

Continuous Float

Efek melayang lembut naik-turun 8px tanpa interupsi terus-menerus.

✨Continuous Float

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

Pulse Ring Radar

Gelombang denyut melingkar yang cocok untuk tombol WhatsApp mengambang.

✨Pulse Ring Radar

@keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.4); opacity: 0; } }