CSS Animasi: Menyembuhkan Halaman Web

Halo sana, para ahli web masa depan! Hari ini, kita akan mandar ke dunia magis animasi CSS. Pada akhir panduan ini, Anda akan dapat membuat elemen menari di halaman web Anda seperti Fred Astaire digital. Jadi, sandal tari virtual Anda, dan mari kita mulai!

Apa Itu Animasi CSS?

Animasi CSS seperti memberikan kehidupan pada elemen statis di halaman web Anda. Bayangkan jika Anda dapat membuat tombol berdenyut saat pengguna mengerahkan mouse ke atasnya, atau logo berputar saat halaman dimuat. Itu kekuatan animasi CSS! Itu memungkinkan Anda untuk mengubah nilai properti CSS dalam durasi yang ditentukan, menciptakan gerakan dan kepentingan visual tanpa memerlukan JavaScript kompleks atau Flash.

Aturan @keyframes

Jantung animasi CSS adalah aturan @keyframes. Ini tempat Anda mendefinisikan tahap animasi Anda.

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

Dalam contoh ini, kita telah membuat animasi yang disebut "bounce". Pada 0% (mula-mula), elemen berada dalam posisi aslinya. Pada 50% (setengah jalan animasi), itu pindah ke atas 20 piksel. Pada 100% (akhir), itu kembali ke posisi aslinya.

Properti Delay Animasi

kadang-kadang, Anda ingin animasi Anda menunggu sebelum dimulai. Itu di mana properti animation-delay berguna.

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

CSS ini akan menerapkan animasi "bounce" ke setiap elemen dengan kelas "delayed-bounce". Animasi akan berlangsung 1 detik, tapi itu tidak akan mulai sampai 2 detik setelah halaman dimuat.

Setel Jumlah Iterasi Animasi

Secara default, animasi berjalan sekali dan berhenti. Tetapi, apa bila Anda ingin animasi Anda terus berjalan, seperti Boneka Energi? Itu di mana animation-iteration-count masuk ke dalam.

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

Sekarang elemen loncatan kita akan terus melompat, atau sampai pengguna menutup halaman (yang mana yang terjadi lebih dulu)!

Properti Arah Animasi

Kadang-kadang, Anda mungkin ingin animasi Anda berjalan ke belakang, atau bergantian antara ke depan dan ke belakang. Properti animation-direction memungkinkan Anda melakukan hal itu.

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Ini akan membuat elemen kita loncat ke atas dan ke bawah secara berkelanjutan, seperti mesin gerak tak berhenti (kalau saja kita dapat menggunaakan ini untuk energi bersih!).

Properti Timing Animasi

Properti animation-timing-function memungkinkan Anda mengendalikan kecepatan animasi Anda. Itu seperti menjadi konduktor orkestra digital Anda sendiri!

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

Ini akan membuat animasi loncatan kita mulai lambat, cepat di tengah, dan kemudian lambat lagi di akhir, memberikan rasa lebih alami dan bergetar.

Setel Mode Isi Animasi

Properti animation-fill-mode menentukan bagaimana elemen harus terlihat sebelum dan sesudah animasi.

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

Dengan forwards, elemen akan mempertahankan gaya dari keyframe terakhir saat animasi berakhir, daripada kembali ke posisi aslinya.

Properti Shorthand Animasi

Jika Anda merasa kepanasan oleh semua properti ini, jangan khawatir! CSS menyediakan properti shorthand untuk menyetel semua properti animasi sekaligus:

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

Baris tunggal ini menyetel nama animasi, durasi, fungsi timing, delay, jumlah iterasi, arah, dan mode isi. Itu seperti pisau Switzerland animasi CSS!

Daftar Properti Animasi CSS

Berikut adalah tabel praktis dari semua properti animasi CSS yang kita bahas:

Properti	Deskripsi
animation-name	Menentukan nama animasi @keyframes
animation-duration	Menentukanberapa lama animasi harus menyelesaikan satu siklus
animation-timing-function	Menentukan kurva kecepatan animasi
animation-delay	Menentukan delay untuk mulai animasi
animation-iteration-count	Menentukan berapa kali animasi harus diputar
animation-direction	Menentukan apakah animasi harus diputar terbalik pada siklus alternatif
animation-fill-mode	Menentukan nilai mana yang akan diterapkan oleh animasi di luar waktu eksekusi
animation	Properti shorthand untuk menyetel semua properti animasi

Dan begitu saja, teman-teman! Anda sekarang dilengkapi pengetahuan untuk menyembuhkan halaman web Anda dengan animasi CSS. Ingat, dengan kekuatan besar datang tanggung jawab besar - gunakan animasi ini bijaksana untuk meningkatkan pengalaman pengguna, bukan mengganggu itu.

Saat Anda berlatih, Anda akan menemukan bahwa animasi CSS seperti memasak - itu memerlukan waktu untuk mendapatkan resep tepat. Tetapi sekali Anda melakukan itu, Anda akan menyajikan pengalaman web animasi yang lezat yang akan membuat pengguna Anda kembali untuk lagi!

Sekarang maju dan animasikan, para Pixar digital saya. Web adalah kanvas Anda, dan CSS adalah kuas Anda. Selamat animasikan!

Credits: Image by storyset