css untuk mencapai kesan animasi

CSS ialah bahasa yang digunakan untuk mereka bentuk gaya halaman web. Ia bukan sahaja boleh menjadikan halaman web lebih cantik, tetapi juga mencapai pelbagai kesan animasi. Dalam artikel ini, saya akan menerangkan secara terperinci cara menggunakan CSS untuk mencapai kesan animasi.

Konsep Asas

Sebelum kita mula mempelajari kesan animasi CSS, kita perlu memahami beberapa konsep asas terlebih dahulu. Yang lebih penting ialah: bingkai utama animasi, tempoh animasi, kelajuan animasi, arah animasi dan mod isian animasi.

Kerangka kunci animasi

Kerangka kunci animasi merujuk kepada perkara utama tertentu dalam animasi. Dalam animasi CSS, kita boleh mentakrifkan berbilang bingkai utama, setiap bingkai utama mentakrifkan keadaan dalam animasi. Dengan beralih antara bingkai utama ini, kesan animasi yang lengkap boleh dibentuk.

Tempoh animasi

Tempoh animasi merujuk kepada jumlah masa dari awal hingga akhir animasi. Kita boleh menggunakan sifat animasi-tempoh CSS untuk menentukan tempoh animasi dalam saat atau milisaat.

Kelajuan Animasi

Kelajuan animasi merujuk kepada kelajuan main balik animasi. Dalam CSS, kita boleh menggunakan atribut animation-timing-function untuk menentukan kelajuan animasi Nilainya boleh linear (linear), ease (ease in and ease out), ease-in (ease in), ease-out. (keluar) Ease) dan ease-in-out (kemudahan masuk dan keluar), dsb.

Arah animasi

Arah animasi merujuk kepada arah main balik animasi. Dalam CSS, kita boleh menggunakan atribut animasi-arah untuk menentukan arah animasi Nilainya boleh menjadi normal (main balik ke hadapan), undur (main balik songsang), ganti (main balik berganti) dan berbalik-balik (main balik berbalik). )tunggu.

Mod isian animasi

Mod isian animasi merujuk kepada keadaan elemen sebelum animasi bermula dan selepas ia tamat. Dalam CSS, kita boleh menggunakan atribut mod-isi-animasi untuk menentukan keadaan sebelum dan selepas animasi bermula. Nilainya boleh menjadi tiada (nilai lalai, tiada pemprosesan dilakukan), ke hadapan (keadaan akhir ialah keadaan pada penghujung animasi), ke belakang (keadaan awal ialah keadaan pada permulaan animasi), dan kedua-duanya ( kedua-dua ke hadapan dan ke belakang digunakan), dsb.

Kaedah Pelaksanaan

Setelah memahami konsep asas animasi CSS, kami mula memperkenalkan cara untuk mencapai kesan animasi.

Langkah 1: Tentukan bingkai utama

Mula-mula, kita perlu menggunakan kata kunci @keyframes untuk mentakrifkan bingkai utama. Sebagai contoh, kod berikut mentakrifkan kerangka utama yang dipanggil "slidein" yang menggerakkan elemen dari kiri ke kanan:

@keyframes slidein{

from{
    left:-100%;
}
to{
    left:0;
}

}

Kod di atas , nama kerangka utama ialah slaid, yang mentakrifkan dua keadaan: dari (keadaan permulaan, sempadan kiri elemen terletak di sebelah kiri jauh penyemak imbas) dan ke (keadaan akhir, sempadan kiri elemen terletak di sebelah kanan pelayar) ).

Kami juga boleh menggunakan peratusan untuk menentukan keadaan bingkai utama. Contohnya, kod berikut mentakrifkan animasi yang menggerakkan elemen dari kiri ke kanan, berhenti seketika pada 30% dan kemudian terus bergerak ke kanan:

@keyframes slidein{

0%{
    left:-100%;
}
30%{
    left:50%;
}
100%{
    left:0;
}

}

Langkah 2: Gunakan animasi

Selepas menentukan bingkai utama, kita perlu menggunakan animasi pada elemen yang memerlukan kesan animasi. Fungsi ini boleh dicapai menggunakan sifat animasi CSS. Contohnya, kod berikut menggunakan animasi bernama "slidein" pada elemen dan menentukan tempoh, kelajuan, arah dan mod isian animasi:

.element{

animation-name:slidein;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-directioin:normal;
animation-fill-mode:forwards;

}

Dalam kod di atas, nama animasi ialah "slidein", tempohnya ialah 2 saat, kelajuan adalah mudah masuk dan keluar, arahnya ialah main balik ke hadapan, dan mod isian ialah keadaan akhir, yang sama dengan keadaan pada penghujung animasi .

Perlu diambil perhatian bahawa atribut animasi boleh disingkatkan sebagai animasi: nama animasi atau animasi: nama animasi tempoh kelajuan arah mod isian.

Langkah 3: Tetapkan sifat animasi lain

Selepas menggunakan animasi pada elemen, kami juga boleh menetapkan sifat animasi lain, seperti masa tunda animasi, dsb. Kita boleh menggunakan sifat kelewatan animasi untuk menetapkan masa kelewatan animasi dalam saat atau milisaat. Contohnya, kod berikut mula memainkan animasi selepas 2 saat:

.elemen{

animation-name:slidein;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-directioin:normal;
animation-fill-mode:forwards;
animation-delay:2s;

}

Ringkasan

Melalui langkah di atas, kami boleh Gunakan CSS untuk mencapai pelbagai kesan animasi dengan mudah. Perlu diingatkan bahawa pelayar yang berbeza mungkin mempunyai tahap sokongan CSS yang sedikit berbeza, jadi beri perhatian kepada ujian dan penyesuaian semasa menulis kod.

Animasi CSS boleh menjadikan halaman web lebih jelas dan menarik, menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Saya harap pengenalan dalam artikel ini dapat membantu pembaca lebih memahami animasi CSS dan menjadikan reka bentuk web lebih cemerlang.

Atas ialah kandungan terperinci css untuk mencapai kesan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!