Animasi dan Peralihan CSS: Panduan Pantas

pengenalan

Animasi dan peralihan CSS ialah alatan berkuasa yang boleh menghidupkan halaman web anda. Ia membolehkan anda mencipta kesan licin, menarik dan menarik secara visual yang meningkatkan pengalaman pengguna. Sama ada anda ingin menambah peralihan mudah antara keadaan atau animasi kompleks yang menarik perhatian, memahami asas ciri ini adalah penting. Dalam panduan ini, kami akan membincangkan cara mencipta kesan fade-in, perbezaan antara peralihan CSS dan animasi, mencipta animasi bingkai kunci tak terhingga, menangguhkan permulaan peralihan dan gunakan fungsi pemasaan animasi untuk mencipta kesan lantunan.

Anda boleh berinteraksi dan bermain dengan kod melalui Codepen yang saya tambahkan untuk setiap contoh!

Bagaimanakah cara saya mencipta kesan fade-in menggunakan animasi CSS?

Untuk mencipta kesan fade-in, anda boleh menggunakan peraturan @keyframes untuk menentukan peringkat animasi. Kerangka utama menentukan keadaan permulaan dan akhir animasi, dan sifat animasi menggunakan animasi pada elemen. Berikut ialah contoh:

Dalam kod ini:

• Kelas .fade-in menggunakan animasi fadeIn selama 2 saat dengan fungsi pemasaan mudah-masuk.

• Peraturan @keyframes fadeIn mentakrifkan animasi, menukar kelegapan daripada 0 kepada 1.

Apakah perbezaan antara peralihan CSS dan animasi?

Peralihan CSS:

• Digunakan untuk perubahan keadaan mudah apabila elemen berubah dari satu keadaan ke keadaan lain.

• Memerlukan pencetus (seperti :hover, :focus, atau :checked) untuk memulakan peralihan.

• Menginterpolasi sifat secara automatik daripada keadaan awal kepada keadaan akhir.

Dalam contoh ini, warna latar belakang elemen .box akan beralih kepada biru selama 0.5 saat apabila dilegar.

Animasi CSS:

• Digunakan untuk urutan animasi yang lebih kompleks, yang melibatkan berbilang peringkat.

• Ditakrifkan menggunakan @keyframes dan tidak memerlukan pencetus untuk bermula.

• Boleh berjalan secara automatik, gelung tanpa had dan memberikan lebih kawalan ke atas pemasaan dan penjujukan.

Dalam contoh ini, kelas .rotate menggunakan animasi putaran berterusan yang melengkapkan satu putaran penuh setiap 2 saat.

Bagaimanakah cara saya mencipta animasi kerangka utama yang berjalan tanpa had?

Untuk mencipta animasi yang berjalan tanpa had, gunakan sifat kiraan lelaran animasi dengan nilai tak terhingga. Ini menjadikan gelung animasi selama-lamanya. Berikut ialah contoh:

Kelas .spin akan menyebabkan elemen berputar secara berterusan, melengkapkan satu putaran penuh setiap 2 saat.

Bagaimanakah saya boleh melambatkan permulaan peralihan CSS?

Untuk melambatkan permulaan peralihan, gunakan sifat peralihan-tangguh. Sifat ini menentukan tempoh peralihan perlu menunggu sebelum bermula. Berikut ialah contoh:

Dalam contoh ini, warna latar belakang akan bertukar kepada hotpink 2 saat selepas acara :hover dicetuskan dan peralihan akan mengambil masa 0.5 saat untuk diselesaikan.

Bagaimanakah cara saya menggunakan fungsi pemasaan animasi untuk mencipta kesan lantunan?

Sifat fungsi pemasaan animasi boleh digunakan dengan nilai cubic-bezier tersuai atau kata kunci yang dipratentukan untuk mencipta pelbagai kesan. Untuk kesan lantunan, anda boleh menentukan bingkai utama dan menggunakan nilai mudah atau nilai cubic-bezier tersuai. Berikut ialah contoh:

Dalam contoh ini:

• Peraturan lantunan @keyframes mentakrifkan kesan lantunan dengan menggerakkan elemen ke atas dan ke bawah.

• Kelas .bounce menggunakan animasi lantunan, yang berulang setiap 2 saat tanpa had dengan fungsi pemasaan yang mudah.

Kesimpulan

Saya harap artikel ini bermanfaat, jumpa lagi pada artikel seterusnya!

Atas ialah kandungan terperinci Animasi dan Peralihan CSS: Panduan Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!