Generator Keyframes CSS

Empat preset

Fade slide

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Elemen muncul sambil meluncur naik dari bawah.

Pulse

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

Efek berdenyut lembut, cocok untuk titik notifikasi dan lencana.

Spin

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Putaran penuh, berguna untuk loader dan ikon.

Bounce

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

Elemen memantul ke atas dan kembali.

Mengapa transform dan opacity?

Peramban mengomposisikan transform dan opacity di GPU tanpa menghitung ulang tata letak atau mengecat ulang, jadi menganimasikannya tetap mulus. Preset sengaja menghindari properti yang memicu penghitungan tata letak.

Bentuk singkat animation

animation: fade-slide 0.6s ease both; dibaca: animasi bernama fade-slide, selama 0.6 detik, dengan easing ease bawaan. Mode isian both menerapkan keadaan awal sebelum animasi dimulai dan mempertahankan keadaan akhir setelah selesai, sehingga elemen tidak berkedip sebelum atau menyentak kembali setelah gerakan.

Konvensi penamaan

• Gunakan kebab-case, sesuai konvensi CSS.
• Gambarkan gerakannya, bukan elemennya: fade-in-up lebih baik daripada alert-appear.
• Hindari nama yang bisa bertabrakan dengan pustaka pihak ketiga.

Dukungan peramban

@keyframes bersifat universal, didukung semua peramban sejak IE 10.