Animasi dengan @keyframes
Membuat animasi bergerak otomatis memakai @keyframes dan properti animation: durasi, pengulangan, arah, dan jeda; plus contoh loading dan efek muncul.
Transition vs Animation
| Transition | Animation (@keyframes) | |
|---|---|---|
| Pemicu | Perlu perubahan keadaan (hover, class) | Bisa jalan sendiri saat halaman dimuat |
| Langkah | Awal → akhir | Banyak tahap di tengah |
| Pengulangan | Tidak | Bisa berulang tak terhingga |
Dua langkah: definisikan lalu pakai
1. Definisikan animasi dengan @keyframes (beri nama):
@keyframes muncul {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}2. Pakai pada elemen:
.kartu {
animation: muncul 0.6s ease-out;
}Banyak tahap dengan persen
@keyframes denyut {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.jantung { animation: denyut 1s infinite; }Properti animation
| Properti | Fungsi | Contoh |
|---|---|---|
animation-name | Nama @keyframes | denyut |
animation-duration | Lama satu putaran | 1s |
animation-timing-function | Irama | ease-in-out, linear |
animation-delay | Tunda mulai | 0.5s |
animation-iteration-count | Berapa kali | 3, infinite |
animation-direction | Arah | normal, alternate (bolak-balik) |
animation-fill-mode | Keadaan sebelum/sesudah | forwards (tahan keadaan akhir) |
Singkatan: animation: nama durasi irama tunda jumlah arah fill;
Contoh: pemuat (spinner)
.spinner {
width: 40px; height: 40px;
border: 4px solid #ddd;
border-top-color: #3c5a44;
border-radius: 50%;
animation: putar 0.8s linear infinite;
}
@keyframes putar {
to { transform: rotate(360deg); }
}Menahan keadaan akhir
Setelah animasi selesai, elemen kembali ke gaya aslinya. Agar tetap di posisi akhir, tambahkan animation-fill-mode: forwards.
Animasi yang bagus itu halus dan bertujuan (menarik perhatian, memberi umpan balik), bukan sekadar pamer. Jangan membuat banyak elemen bergerak bersamaan terus-menerus.