CSS AdvancedLesson 60Preview gratis
CSS Animations
Lesson ini bagian dari CSS · Semua level
Ringkasan
CSS Animation memungkinkan perubahan berulang tanpa memerlukan keadaan khusus seperti hover, cukup dengan mendefinisikan `@keyframes` dan menjalankannya pada elemen. Kita bisa mengatur pengulangan, arah, kecepatan, dan keadaan awal/akhir animasi. Berbeda dengan transisi, animasi bisa berjalan otomatis saat halaman dimuat.
Poin kunci
- `@keyframes namaAnimasi { ... }` mendefinisikan tahapan persentase perubahan properti
- `animation-name` menghubungkan elemen dengan keyframes yang sudah dibuat
- `animation-iteration-count` bisa berupa angka atau `infinite`
- `animation-fill-mode: forwards` mempertahankan nilai akhir setelah animasi selesai
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.