Terangkan sifat-sifat yang berbeza yang boleh anda gunakan untuk mengawal peralihan CSS (mis., Peralihan-harta, jangkauan peralihan, fungsi-fungsi-fungsi, peralihan-kelewatan).

Bagaimanakah saya boleh menggunakan harta peralihan untuk menentukan sifat CSS yang harus peralihan?

transition-property Harga digunakan untuk menentukan nama-nama sifat CSS yang mana kesan peralihan harus digunakan. Ini membolehkan anda mengawal sifat mana yang akan bernyawa apabila perubahan berlaku. Inilah cara anda boleh menggunakannya:

• Harta Tunggal: Jika anda ingin memindahkan harta tunggal, anda hanya mengisytiharkan nama harta benda. Sebagai contoh, untuk memindahkan background-color , anda akan menulis:

   <code class="css">.element { transition-property: background-color; }</code>

• Hartanah Pelbagai: Anda juga boleh menggunakan peralihan kepada pelbagai sifat dengan memisahkannya dengan koma. Sebagai contoh, jika anda ingin beralih kedua-dua background-color dan width , anda akan menulis:

   <code class="css">.element { transition-property: background-color, width; }</code>

• Semua sifat: Untuk menggunakan kesan peralihan kepada semua sifat yang boleh animasi, anda menggunakan kata kunci all . Ini adalah nilai lalai jika transition-property tidak ditentukan:

   <code class="css">.element { transition-property: all; }</code>

• Tiada: Sekiranya anda ingin melumpuhkan peralihan untuk elemen tertentu, anda boleh menetapkan transition-property kepada none :

   <code class="css">.element { transition-property: none; }</code>

Apakah cara untuk menyesuaikan jangkauan peralihan untuk mengawal berapa lama peralihan CSS?

Harta transition-duration membolehkan anda mengawal tempoh peralihan CSS, iaitu, berapa lama animasi peralihan yang diperlukan untuk diselesaikan. Berikut adalah cara untuk menyesuaikannya:

• Nilai Masa: Anda boleh menentukan tempoh menggunakan s atau milisaat ( ms ). Sebagai contoh, untuk menetapkan tempoh peralihan 2 saat, anda akan menulis:

   <code class="css">.element { transition-duration: 2s; }</code>

  Atau, selama tempoh 500 milisaat:

   <code class="css">.element { transition-duration: 500ms; }</code>

• Pelbagai tempoh: Jika anda mempunyai pelbagai sifat peralihan, anda boleh menetapkan tempoh yang berbeza untuk setiap. Tempoh harus berada dalam urutan yang sama seperti sifat-sifat yang disenaraikan dalam transition-property , dipisahkan oleh koma. Contohnya:

   <code class="css">.element { transition-property: background-color, width; transition-duration: 1s, 2s; }</code>

  Ini akan peralihan background-color lebih dari 1 saat dan width selama 2 saat.

• Tempoh lalai: Jika anda tidak menentukan transition-duration , ia mungkir kepada 0s , yang bermaksud peralihan berlaku dengan serta-merta, dan tiada animasi akan dapat dilihat.

Bolehkah anda menerangkan cara menggunakan fungsi peralihan masa untuk mengubah kelajuan peralihan CSS sepanjang tempohnya?

Harta transition-timing-function mentakrifkan lengkung kelajuan kesan peralihan, yang membolehkan anda mengawal bagaimana peralihan berlangsung sepanjang tempohnya. Inilah cara anda boleh menggunakannya:

• Fungsi masa yang telah ditetapkan: CSS menyediakan beberapa fungsi masa yang telah ditetapkan yang boleh anda gunakan secara langsung:

  • ease (lalai): Bermula perlahan, mempercepatkan melalui tengah, dan kemudian melambatkan pada akhir.
  • linear : Peralihan berlangsung pada kelajuan berterusan dari awal hingga akhir.
  • ease-in : Bermula perlahan-lahan dan kemudian mempercepatkan sehingga akhir.
  • ease-out : Bermula dengan cepat dan kemudian melambatkan ke arah akhir.
  • ease-in-out : Bermula perlahan-lahan, mempercepatkan di tengah, dan kemudian melambatkan lagi pada akhir.

  Sebagai contoh, untuk menggunakan fungsi masa ease-in :

   <code class="css">.element { transition-timing-function: ease-in; }</code>

• Fungsi Bézier Kubik: Untuk kawalan lebih lanjut, anda boleh menggunakan fungsi bézier padu. Ini ditakrifkan oleh empat titik kawalan (P0, P1, P2, P3), di mana P0 dan P3 sentiasa (0, 0) dan (1, 1), masing -masing. Anda menentukan P1 dan P2. Contohnya:

   <code class="css">.element { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }</code>

  Ini mewujudkan fungsi masa tersuai yang boleh anda sesuaikan agar sesuai dengan keperluan anda.

• Fungsi langkah: Anda juga boleh menggunakan fungsi langkah untuk membuat peralihan yang berlangsung dalam langkah -langkah diskret dan bukannya lancar. Contohnya:

   <code class="css">.element { transition-timing-function: steps(4, end); }</code>

  Ini akan membahagikan peralihan menjadi 4 langkah yang sama, dengan perubahan yang berlaku pada akhir setiap langkah.

Terangkan sifat-sifat yang berbeza yang boleh anda gunakan untuk mengawal peralihan CSS (misalnya, peralihan-harta, jangkauan peralihan, fungsi-fungsi peralihan, kelewatan peralihan).

Peralihan CSS membolehkan anda menukar nilai harta dengan lancar sepanjang tempoh tertentu. Berikut adalah sifat utama yang digunakan untuk mengawalnya:

• Peralihan-Property: Harta ini menentukan sifat CSS yang harus beralih apabila perubahan berlaku. Anda boleh menyenaraikan satu atau lebih sifat, menggunakan all untuk peralihan semua sifat animatable, atau none untuk melumpuhkan peralihan.

  Contoh:

   <code class="css">.element { transition-property: background-color, width; }</code>

• Peralihan Peralihan: Harta ini menetapkan tempoh masa animasi peralihan perlu diambil untuk diselesaikan. Anda boleh menentukan tempoh dalam s saat atau milisaat ( ms ), dan anda boleh menetapkan tempoh yang berbeza untuk pelbagai sifat.

  Contoh:

   <code class="css">.element { transition-duration: 1s, 2s; }</code>

• Peralihan-fungsi-fungsi: Harta ini mentakrifkan lengkung kelajuan kesan peralihan, mengawal bagaimana peralihan berlangsung sepanjang tempohnya. Anda boleh menggunakan fungsi yang telah ditetapkan seperti ease , linear , ease-in , ease-out , ease-in-out , atau fungsi bézier kubik adat dan fungsi langkah.

  Contoh:

   <code class="css">.element { transition-timing-function: ease-in-out; }</code>

• Peralihan-kelewatan: Harta ini menentukan kelewatan sebelum kesan peralihan bermula. Anda boleh menetapkan kelewatan dalam s saat atau milisaat ( ms ). Jika anda mempunyai pelbagai sifat peralihan, anda boleh menetapkan kelewatan yang berbeza untuk setiap.

  Contoh:

   <code class="css">.element { transition-delay: 0.5s, 1s; }</code>

Ciri -ciri ini boleh digabungkan ke dalam harta transition singkat untuk kemudahan. Contohnya:

 <code class="css">.element { transition: background-color 1s ease-in-out 0.5s, width 2s linear 1s; }</code>

Sendiri ini menetapkan background-color untuk beralih lebih dari 1 saat dengan fungsi masa ease-in-out dan kelewatan 0.5 saat, manakala peralihan width selama 2 saat dengan fungsi masa linear dan kelewatan 1 saat.

Atas ialah kandungan terperinci Terangkan sifat-sifat yang berbeza yang boleh anda gunakan untuk mengawal peralihan CSS (mis., Peralihan-harta, jangkauan peralihan, fungsi-fungsi-fungsi, peralihan-kelewatan).. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!