Transition cuma bisa dari keadaan A ke B, dan butuh pemicu kayak hover. Animation bisa jalan sendiri, punya banyak tahap, dan bisa diulang terus, misalnya kotak yang naik-turun tanpa henti. Caranya dua langkah: tulis tahap-tahap gerakannya di @keyframes, lalu pasang ke elemen dengan properti animation.
🧪 Tebakan cepat: animasi yang diputar sekali sudah selesai. Kotaknya diam di posisi terakhir, atau balik ke posisi awal? Tebak dulu, jawabannya ada di bagian "Sesudah animasinya selesai".
Tulis tahapnya, lalu pasang
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-40px); }
}
.box {
animation: bounce 1s infinite;
}
@keyframes bounce { ... }bikin animasi bernamabounce. Namanya bebas, kamu yang menentukan.0%,50%dan100%adalah tahap-tahapnya, dihitung dari lamanya animasi.0%awal,100%akhir.0%, 100%artinya dua tahap itu sama: posisi asal.50% { transform: translateY(-40px); }: di tengah waktu, kotaknya naik 40px.animation: bounce 1s infinitedi.boxmemasang animasi itu: namabounce, satu putaran 1 detik, diulang terus (infinite).
Hasilnya, kotaknya naik lalu turun lagi setiap detik, terus-menerus. Gerakan di antara tahap-tahapnya diisi sendiri oleh browser.
from dan to buat dua tahap
@keyframes muncul {
from { opacity: 0; }
to { opacity: 1; }
}
from sama dengan 0%, to sama dengan 100%. opacity mengatur seberapa kelihatan elemen: 1 kelihatan penuh, 0 hilang. Jadi animasi muncul membuat elemen pelan-pelan tampak.
Properti animation satu per satu
animation: geser 2s infinite adalah singkatan dari:
.kotak {
animation-name: geser;
animation-duration: 2s;
animation-iteration-count: infinite;
}
animation-name: nama@keyframes-nya, harus sama persis.animation-duration: lama satu putaran, pakai satuansataums.animation-iteration-count: berapa kali diulang, angka (misalnya3) atauinfinitebuat terus-menerus.animation-timing-function: cara percepatannya, sama seperti di transition (ease,linear).animation-direction: alternate: putaran kedua, keempat dan seterusnya jalan mundur, jadi gerakannya bolak-balik.
Sesudah animasinya selesai
Begitu animasi yang gak diulang terus selesai, gaya dari @keyframes dilepas dan elemennya kembali ke gayanya sendiri, jadi kelihatan loncat ke posisi awal. Itu jawaban tebakannya. Tambahkan animation-fill-mode: forwards biar elemennya diam di tahap terakhir.
⚠️ Jebakan yang sering ketemu
- Nama gak cocok.
@keyframes geserdengananimation-name: gesrgak jalan sama sekali. - Lupa durasi. Bawaannya
0s, jadi animasinya selesai sebelum sempat kelihatan. - Lupa satuan durasi.
animation-duration: 2gak valid. Tulis2s. - Animasi terus-menerus di mana-mana. Gerakan tanpa henti bikin capek mata. Pakai seperlunya, dan hormati pengguna yang mengaktifkan
prefers-reduced-motion.
🎯 Transition atau animation?
- Perubahan sekali dari A ke B karena hover, klik atau fokus:
transition. - Banyak tahap, misalnya naik lalu turun lagi:
animationdengan@keyframes. - Jalan terus tanpa pemicu, misalnya ikon loading yang berputar:
animationdenganinfinite.
🔬 Coba sendiri
Pilih keyframes, durasi dan jumlah putarannya, lalu lihat kotaknya bergerak.
TL;DR: @keyframes nama { ... } menulis tahap-tahap gerakan (from/to atau persen), lalu animation memasangnya ke elemen. Tiga yang paling penting: animation-name (sama persis dengan nama keyframes), animation-duration (dengan s), dan animation-iteration-count (angka atau infinite). Singkatannya animation: geser 2s infinite. Sesudah selesai, elemen balik ke gayanya sendiri, kecuali diberi animation-fill-mode: forwards.
