Penjelasan terperinci tentang harta css3transition

Peralihan CSS3 membolehkan kami mencipta kesan peralihan antara dua gaya CSS yang berbeza. Dengan menggunakan atribut peralihan, kita boleh menentukan cara sifat CSS berubah daripada satu nilai kepada nilai yang lain. Perubahan ini boleh dicetuskan oleh peristiwa tetikus (seperti :hover), menekan butang, dsb.

Penggunaan asas atribut peralihan

Dalam CSS3, atribut peralihan digunakan untuk menentukan cara untuk beralih daripada satu gaya CSS ke gaya CSS yang lain. Berikut ialah contoh asas menggunakan atribut peralihan:

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

Dalam kod di atas, apabila tetikus dilegar di atas elemen div, lebar elemen div akan beralih daripada 50px kepada 150px, dan kesan peralihan akan bertahan selama 2 detik.

Sintaks terperinci atribut peralihan

Sintaks atribut peralihan adalah seperti berikut:

transition: [property] [duration] [timing-function] [delay];

Di mana:

[property]: Nama atribut CSS peralihan, yang boleh menjadi atribut tunggal atau berbilang atribut, diasingkan dengan atribut berbilang com.

[tempoh]: Tentukan tempoh peralihan, dalam saat (s) atau milisaat (ms).

[fungsi pemasaan]: Tentukan fungsi masa peralihan, yang boleh menjadi mudah, linear, mudah masuk, mudah keluar, mudah masuk, cubic-bezier().

[delay]: Tentukan masa tunda sebelum peralihan mula dilaksanakan, dalam saat (s) atau milisaat (ms).

Berdasarkan sintaks di atas, kita boleh mentakrifkan kesan peralihan yang lebih kompleks melalui atribut peralihan.

Nilai atribut peralihan

Berikut ialah nilai pilihan dan nilai lalai ​​​​bagi atribut peralihan:

[property]: nama atribut CSS, seperti ketinggian, lebar, latar belakang- warna, dsb.

[tempoh]: masa, seperti 1s, 3.5s, 500ms, dsb., nilai lalai ialah 0s

[fungsi masa]: fungsi masa, seperti linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier, nilai lalai ialah ease .

[kelewatan]: masa, seperti 1s, 3.5s, 500ms, dsb., nilai lalai ialah 0s.

atribut fungsi pemasaan-peralihan

Atribut fungsi pemasaan-peralihan digunakan untuk menentukan fungsi masa peralihan. Ia menentukan bagaimana nilai sifat CSS beralih dengan lancar daripada nilai permulaan kepada nilai akhir. Fungsi masa biasa termasuk:

linear: pelonggaran kelajuan malar, iaitu gerakan seragam

kemudahan: nilai lalai. Mula perlahan-lahan, tukar dengan cepat di tengah, dan perlahan lagi pada penghujung

ease-in: mula perlahan-lahan

ease-out: tamat perlahan-lahan

ease-in-out: mula dan tamat perlahan-lahan

cubic-bezier: fungsi masa tersuai

atribut tunda peralihan

Atribut tunda peralihan digunakan untuk menentukan masa tunda kesan peralihan. Iaitu, berapa lama kesan peralihan menunggu untuk mula melaksanakan selepas dicetuskan. Jika nilai kelewatan ditentukan, kesan peralihan akan mula dilaksanakan selepas kelewatan masa yang ditentukan selepas mencetuskan.

Contoh atribut peralihan

Berikut ialah beberapa contoh atribut peralihan:

Asal peralihan

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

Dalam kod di atas, apabila tetikus melayang di atas elemen div, lebar elemen div akan ditukar kepada 50px 150px dan Kesan peralihan akan berlangsung selama 2 saat. Pada masa yang sama, elemen div diputar 45 darjah di sekeliling bahagian atas.

Atribut berbilang

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

Dalam kod di atas, apabila tetikus melayang di atas elemen div, lebar, ketinggian dan warna latar belakang elemen div akan berubah pada masa yang sama dan kesan peralihan akan bertahan selama 2 saat.

Fungsi masa tersuai

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

Dalam kod di atas, apabila tetikus melayang di atas elemen div, lebar elemen div akan beralih daripada 50px kepada 150px, dan kesan peralihan ini akan bertahan selama 2 saat. Pada masa yang sama, kami menggunakan cubic-bezier() untuk menyesuaikan fungsi masa untuk menjadikan kesan peralihan lebih diperibadikan.

Ringkasan

Kesan peralihan CSS3 sangat berkuasa, dan pelbagai kesan peralihan yang kompleks boleh ditakrifkan melalui atribut peralihan. Dengan menguasai pengetahuan peralihan yang berkaitan, kami boleh mereka bentuk kesan animasi dalam halaman Web dengan cara yang lebih berwarna.

Atas ialah kandungan terperinci Penjelasan terperinci tentang harta css3transition. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!