CSS Animations: Bringing Web Pages to Life

Hai there, para web wizard masa depan! Hari ini, kita bakal melihat dunia magical CSS animations. Pada akhir panduan ini, anda akan mampu membuat elemen menari di atas laman web anda seperti Fred Astaire digital. Jadi, sandal tari virtual anda, dan mari kita mulakan!

Apa Itu CSS Animation?

CSS animation adalah seperti memberi nyawa kepada elemen statik di laman web anda. Bayangkan jika anda boleh membuat butang berdenyut ketika pengguna melayarannya, atau logo berputar ketika halaman dimuatkan. Itu kekuatan CSS animation! Ia membolehkan anda mengubah nilai properti CSS sepanjang tempoh yang ditentukan, mencipta pergerakan dan minat visual tanpa perlunya JavaScript kompleks atau Flash.

Rules @keyframes

Jantung CSS animation adalah rules @keyframes. Di sini anda tentukan peringkat animasi anda.

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

Dalam contoh ini, kami telah membuat animasi yang dipanggil "lompat". Pada 0% (permulaan), elemen berada di posisi asalnya. Pada 50% (setengah jalan animasi), ia Bergerak ke atas 20 piksel. Pada 100% (akhir), ia kembali ke posisi asalnya.

Properti Animation Delay

Kadang-kadang, anda mahu animasi anda menunggu sebelum mula. Itu di mana properti animation-delay berguna.

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

CSS ini akan terapkan animasi "lompat" ke mana-mana elemen dengan kelas "delayed-lompat". Animasi akan berlangsung 1 saat, tetapi ia tidak akan mula sehingga 2 saat selepas halaman dimuatkan.

Set Animation Iteration Count

Secara default, animasi dijalankan sekali dan berhenti. Tetapi apa kalau anda mahu animasi anda terus berjalan, seperti Bunny Energizer? Itu di mana animation-iteration-count masuk.

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

Sekarang elemen lompat kami akan terus melompat selamanya, atau sehingga pengguna tutup halaman (yang mana yang terlebih dahulu)!

Properti Animation Direction

Kadang-kadang, anda mungkin mahu animasi anda berjalan ke belakang, atau bergantian antara ke hadapan dan ke belakang. Properti animation-direction membolehkan anda melakukan ini.

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

Ini akan membuat elemen kami melompat ke atas dan ke bawah terus, seperti mesin pergerakan kekal (jika sahaja kita boleh mengguna ini untuk tenaga bersih!)

Properti Animation Timing Function

Properti animation-timing-function membolehkan anda mengawal kelajuan animasi anda. Ia seperti menjadi pengconductor orkestra digital anda sendiri!

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

Ini akan membuat animasi lompat kami mulai perlahan, meningkatkan kelajuan di pertengahan, dan kemudian perlahan lagi di akhir, memberikan rasa lebih natural dan bouncy.

Set Animation Fill Modes

Properti animation-fill-mode menentukan bagaimana elemen sepatutnya kelihatan sebelum dan selepas animasi.

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

Dengan forwards, elemen akan mengekalkan gaya daripada keyframe terakhir apabila animasi berakhir, sebaliknya kembali ke keadaan asalnya.

Properti Animation Shorthand

Jika anda merasa kewalahan oleh semua properti ini, jangan bimbang! CSS menyediakan properti singkat untuk menetapkan semua properti animasi sekali:

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

Baris tunggal ini menetapkan nama animasi, tempoh, fungsi penyesuaian, delay, bilangan perulangan, arah, dan mode isian. Ia seperti kapal angkasa CSS animation!

Senarai Properti CSS Animation

Ini adalah jadual praktikal semua properti CSS animation yang kami cover:

Properti	Keterangan
animation-name	Nyatakan nama animasi @keyframes
animation-duration	Nyatakan berapa lama animasi seharusnya menyelesaikan satu siklus
animation-timing-function	Nyatakan kurva kelajuan animasi
animation-delay	Nyatakan delay permulaan animasi
animation-iteration-count	Nyatakan bilangan kali animasi seharusnya dimainkan
animation-direction	Nyatakan sama ada animasi seharusnya dimainkan balik pada siklus ganti
animation-fill-mode	Nyatakan nilai yang diterapkan oleh animasi di luar masa pelaksanaannya
animation	Properti singkat untuk menetapkan semua properti animasi

Dan itulah, rakan-rakan! Anda kini dilengkapi dengan pengetahuan untuk membawa laman web anda hidup dengan CSS animations. Ingat, dengan kekuatan besar datang tanggungjawab besar - gunakan animasi ini bijak untuk meningkatkan pengalaman pengguna, bukan menggangguannya.

Buat latihan, anda akan menemui bahawa CSS animations adalah seperti memasak - ia memerlukan masa untuk mendapatkan resipi tepat. Tetapi sekali anda membuatnya, 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 pensel anda. Selamat animating!

Credits: Image by storyset