Terangkan sifat-sifat yang berbeza yang boleh anda gunakan untuk mengawal animasi CSS (misalnya, nama animasi, jangkauan animasi, fungsi animasi-masa, animasi-pengiraan, arahan animasi, animasi-fill-mod).

Animasi CSS dikawal melalui pelbagai sifat, masing -masing menentukan aspek animasi yang berbeza. Berikut adalah penjelasan terperinci mengenai sifat -sifat ini:

• Nama Animasi : Harta ini menentukan nama @keyframes at-rule yang mentakrifkan tingkah laku animasi. Sebagai contoh, animation-name: fadeIn; akan menggunakan animasi yang ditakrifkan oleh @keyframes fadeIn { ... } .
• Pengharaman Animasi : Ini menetapkan tempoh masa yang perlu diambil oleh animasi untuk menyelesaikan satu kitaran. Ia boleh ditentukan dalam beberapa saat atau milisaat (MS). Sebagai contoh, animation-duration: 3s; bermaksud animasi akan berlangsung selama 3 saat.
• Animasi-Timing-Function : Harta ini mentakrifkan bagaimana animasi akan berkembang selama satu kitaran tempohnya. Nilai umum termasuk ease , linear , ease-in , ease-out , dan ease-in-out . Di samping itu, anda boleh menggunakan fungsi padu-bezik untuk menentukan fungsi masa tersuai.
• Animation-Fiteration-Count : Ini menentukan bilangan kali animasi harus dimainkan. Ia boleh menjadi nombor, seperti animation-iteration-count: 3; , atau ditetapkan untuk infinite untuk melengkapkan animasi selama -lamanya.
• Barang animasi : Harta ini menentukan sama ada animasi harus dimainkan secara terbalik pada beberapa atau semua kitaran. Nilai termasuk normal , reverse , alternate , dan alternate-reverse .
• Animasi-Fill-Mode : Ini mengawal nilai apa yang digunakan untuk elemen sasaran sebelum dan selepas animasi dilaksanakan. Nilai yang mungkin none , forwards , backwards , dan both . forwards akan mengekalkan nilai kerangka utama terakhir, sementara backwards akan menggunakan nilai kerangka utama pertama sebelum animasi bermula.

Ciri -ciri ini boleh digunakan secara individu atau bersama -sama untuk mencapai animasi yang kompleks.

Bagaimanakah saya boleh menetapkan masa dan kelajuan animasi CSS menggunakan fungsi animasi-masa?

Hartanah animation-timing-function di CSS membolehkan anda mengawal masa dan kelajuan animasi sepanjang tempohnya. Harta ini mentakrifkan lengkung percepatan animasi, yang mempengaruhi seberapa cepat ia bermula, bagaimana ia berlangsung, dan bagaimana ia berakhir. Berikut adalah beberapa nilai yang sama untuk animation-timing-function :

• ease : Ini adalah nilai lalai. Animasi bermula perlahan -lahan, mempercepatkan melalui tengah, dan kemudian melambatkan ke arah akhir. Ia diwakili oleh fungsi cubic-bezier(0.25, 0.1, 0.25, 1) .
• linear : Animasi bergerak pada kelajuan berterusan dari awal hingga akhir. Ini diwakili oleh cubic-bezier(0, 0, 1, 1) .
• ease-in : Animasi bermula perlahan-lahan dan kemudian mempercepatkan apabila ia berlangsung. Diwakili oleh cubic-bezier(0.42, 0, 1, 1) .
• ease-out : Animasi bermula dengan cepat dan kemudian melambatkan ke arah akhir. Diwakili oleh cubic-bezier(0, 0, 0.58, 1) .
• ease-in-out : Animasi bermula perlahan-lahan, mempercepatkan melalui tengah, dan kemudian melambatkan lagi ke arah akhir. Diwakili oleh cubic-bezier(0.42, 0, 0.58, 1) .

Di samping itu, anda boleh membuat fungsi masa tersuai menggunakan fungsi cubic-bezier , yang mengambil empat nombor sebagai parameter, masing-masing mewakili mata pada graf yang mentakrifkan lengkung animasi. Sebagai contoh, animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); mewujudkan lengkung tersuai.

Dengan menggunakan fungsi masa ini, anda boleh menyempurnakan kelajuan dan masa animasi anda untuk mencapai kesan visual yang dikehendaki.

Apakah kesan menggunakan nilai yang berbeza untuk arah animasi dalam animasi CSS?

Harta animation-direction dalam CSS mengawal arah di mana animasi harus dimainkan, terutamanya apabila ia ditetapkan untuk diulang. Begini bagaimana nilai yang berbeza mempengaruhi animasi:

• normal : Ini adalah nilai lalai. Animasi memainkan ke hadapan dari awal hingga akhir setiap kitaran. Jika animasi berulang beberapa kali, setiap kitaran akan dimainkan ke hadapan.
• reverse : Animasi memainkan terbalik, bermula dari keadaan akhir dan bergerak kembali ke keadaan permulaan. Setiap kitaran akan dimainkan ke belakang.
• alternate : Animasi bergantian antara ke hadapan dan terbalik. Pada kitaran bernombor (2, 4, 6, dan lain-lain), ia memainkan ke hadapan, dan pada kitaran ganjil (1, 3, 5, dan lain-lain), ia bermain secara terbalik. Ini mewujudkan kesan back-and-forth.
• alternate-reverse : Sama seperti alternate , tetapi animasi bermula secara terbalik. Oleh itu, pada kitaran ganjil (1, 3, 5, dan lain-lain), ia bermain secara terbalik, dan pada kitaran bernombor (2, 4, 6, dan lain-lain), ia memainkan ke hadapan.

Menggunakan nilai-nilai yang berbeza ini untuk animation-direction boleh membuat pelbagai kesan visual, dari animasi gelung mudah ke animasi berayun yang lebih kompleks. Sebagai contoh, animasi pendulum mungkin menggunakan alternate untuk berayun ke belakang dan sebagainya, sementara animasi bola yang memantul mungkin menggunakan alternate-reverse untuk menghasilkan kesan lantunan yang realistik.

Bolehkah anda menerangkan bagaimana mod-fill-mode mempengaruhi tingkah laku animasi CSS sebelum dan selepas mereka berlari?

Harta animation-fill-mode menentukan gaya apa yang digunakan untuk elemen sebelum dan selepas animasi berjalan. Berikut adalah nilai yang berbeza dan kesannya:

• none : Ini adalah lalai. Animasi tidak memberi kesan kepada elemen sebelum ia bermula atau selepas ia berakhir. Unsur itu kembali ke keadaan asalnya sejurus selepas selesai animasi.
• forwards : Selepas animasi berakhir, elemen kekal di negeri yang ditakrifkan oleh kerangka utama animasi. Ini berguna untuk mengekalkan keadaan akhir animasi, seperti menjaga elemen yang kelihatan selepas ia memudar.
• backwards : Sebelum animasi bermula, elemen ditetapkan kepada negeri yang ditakrifkan oleh kerangka utama animasi pertama. Ini boleh digunakan untuk menyediakan elemen untuk animasi sebelum ia bermula, seperti menetapkan elemen untuk disembunyikan sebelum ia memudar.
• both : Ini menggabungkan kesan forwards dan backwards . Unsur ini menggunakan gaya yang ditakrifkan oleh kerangka utama pertama sebelum animasi bermula dan mengekalkan gaya kerangka utama terakhir selepas animasi berakhir.

Dengan menggunakan animation-fill-mode , anda boleh mengawal penampilan dan tingkah laku elemen sebelum, semasa, dan selepas animasi. Ini boleh menjadi penting untuk mengekalkan kesinambungan dalam animasi antara muka pengguna atau untuk mewujudkan peralihan lancar antara keadaan yang berbeza dari elemen.

Atas ialah kandungan terperinci Terangkan sifat-sifat yang berbeza yang boleh anda gunakan untuk mengawal animasi CSS (mis., Nama animasi, jangkauan animasi, fungsi animasi, animasi-pengiraan, arahan animasi, animat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!