Bagaimana Menggunakan Peralihan & Animasi CSS3 untuk Sorotan Perubahan UI

Pereka dan artis mempunyai sejarah yang panjang bereksperimen dengan gerakan, kesan, dan pelbagai jenis ilusi dengan tujuan menambah lapisan tambahan untuk kerja mereka. Pergerakan op seni mula menggunakan ilusi optik pada tahun 1960-an untuk memberi kesan gerakan.

Sejak itu, pendekatan baru dan baru muncul, seperti seni kinetik baru-baru ini yang memanjangkan perspektif penonton dengan menggunakan gerakan multidimensional. Gerakan juga muncul dalam sains komputer dengan penciptaan kursor berkedip pertama pada tahun 1967.

Di bahagian depan pembangunan elemen DOM biasanya animasi oleh JavaScript sebelum CSS3 dikeluarkan, dan ia merupakan kaedah yang masih berfungsi, tetapi Ciri-ciri baru yang diperkenalkan oleh CSS3 membolehkan kami meningkatkan reka bentuk kami dengan kesan dan gerakan yang berbeza dengan cara yang lebih intuitif.

Dua teknik utama menawarkan CSS3 adalah peralihan dan animasi. Dalam catatan ini kita akan melihat apa yang mereka ada, apakah perbezaan antara mereka, dan bagaimana anda boleh menggunakannya.

Peralihan

Peralihan dan animasi kedua-duanya digunakan untuk menggambarkan perubahan dalam keadaan daripada elemen HTML oleh mengubah satu atau lebih sifat CSSnya.

Bentuk visualisasi visual yang paling sederhana adalah mengubah warna butang atau pautan apabila ia melayang. Apabila ia berlaku, elemen mendapat gaya yang sedikit berbeza, yang biasanya diperhatikan oleh penonton seolah-olah sesuatu telah bergerak di skrin.

Mengubah sifat CSS pautan pada hover (atau fokus, atau klik) adalah bentuk peralihan tertua dan paling mudah, dan ia wujud sebelum era CSS3.

 a color: orange;  a: hover color: red;  a: fokus color: blue;  a: dikunjungi color: green; 

Peralihan digunakan apabila elemen HTML berubah dari satu keadaan yang telah ditetapkan kepada yang lain. CSS3 memperkenalkan ciri-ciri baru yang membolehkan visualisasi lebih canggih daripada sebelumnya, seperti fungsi masa atau kawalan jangka masa.

Kami akan melihat ciri-ciri CSS baru di bahagian seterusnya, selepas memahami bagaimana animasi berbeza. Buat masa sekarang, mari kita lihat perkara yang paling penting yang perlu anda ketahui mengenai peralihan.

1. Mereka sentiasa mempunyai permulaan dan keadaan akhir.
2. Istilah antara mata permulaan dan akhir secara tersirat ditentukan oleh penyemak imbas, kita tidak boleh mengubahnya dengan CSS.
3. Mereka memerlukan mencetuskan eksplisit, seperti menambah pseudoclass baru oleh CSS, atau kelas baru oleh jQuery.

Anda dapat melihat contoh indah peralihan CSS3 dengan bijak yang digunakan di bawah ini, di mana pengarang mendedahkan maklumat tersembunyi dengan cara yang tidak mengganggu tetapi masih mengarahkan fokus pengguna pada kandungan baru.

Animasi

Jika kita mahu menggambarkan perubahan keadaan dengan pergerakan yang lebih rumit, atau jika kita tidak mempunyai pemicu eksplisit, mis. jika kita mahu memulakan kesan apabila halaman dimuatkan, animasi adalah cara untuk pergi.

Animasi menjadikannya mungkin untuk menentukan laluan yang lebih kompleks dengan menetapkan dan mengkonfigurasi kita sendiri keyframes. Keyframes adalah titik perantaraan semasa animasi, yang membolehkan kita mengubah gaya elemen animasi sebanyak yang kita inginkan.

Walaupun CSS3 menawarkan cara yang hebat untuk membina animasi canggih, biasanya lebih sukar untuk membuat mereka daripada peralihan, sebab itu terdapat banyak perpustakaan animasi hebat di luar sana, yang dapat memudahkan kerja kita.

Perkara yang paling penting yang perlu anda ketahui mengenai animasi CSS3 termasuk:

1. mereka tidak memerlukan mencetuskan eksplisit, mereka boleh mula pada muatan halaman atau apabila satu lagi peristiwa DOM berlaku dalam penyemak imbas
2. mereka boleh digunakan dalam kes-kes semasa peralihan digunakan, contohnya apabila kelas atau pseudoclass baru ditambahkan atau dikeluarkan (walaupun ia adalah kes penggunaan yang kurang kerap)
3. mereka memerlukan kita untuk menentukan beberapa kerangka utama (negeri pertengahan)
4. kita boleh menentukan bilangan, kekerapan, dan gaya kunci utama ini

Dalam contoh di bawah, anda dapat melihat menu jatuh turun animasi yang sejuk. Animasi bermula apabila kita mengklik butang. Ini dicapai dengan menambahkan kelas tambahan kepada unsur senarai dengan jQuery apabila peristiwa klik berlaku.

Kelas-kelas baru ini dinyalakan dengan spesifik @keyframes peraturan dalam fail CSS. Kelas tambahan dikeluarkan oleh jQuery apabila pengguna mengklik butang pada masa yang akan datang dan menu menjadi tersembunyi lagi.

CSS Properties dan The @keyframes At-Rule

Untuk peralihan kita boleh menggunakan sama ada peralihan harta pendek, atau 4 hartanah berkaitan peralihan: peralihan-harta, tempoh peralihan, peralihan-fungsi masa, dan kelewatan peralihan. Harta tersendiri mengandungi semua sifat tunggal dalam bentuk ringkas.

Untuk animasi ada animasi harta pendek di tangan kami yang tidak kurang dari 8 sifat animasi tunggal, iaitu nama-animasi, tempoh masa animasi, animasi-fungsi masa, kelewatan animasi, kiraan animasi-lelaran, arahan animasi, animasi-mengisi-mod, dan animasi-bermain-negeri.

Perkara yang paling penting dengan kedua-dua peralihan dan animasi ialah kita sentiasa perlu menentukan sifat CSS yang akan diubah suai semasa perubahan keadaan. Dengan peralihan ia kelihatan seperti ini:

 .elemen latar belakang: oren; harta-peralihan: latar belakang; tempoh peralihan: 3s; peralihan-fungsi masa: mudah masuk;  .element: hover background: red; 

Kami telah menentukan latar belakang harta, kerana ini adalah apa yang akan diubah semasa peralihan.

Kami boleh mengubah lebih dari satu sifat CSS dalam satu peralihan, dalam hal ini kod di atas akan diubah seperti ini: peralihan-harta: latar belakang, sempadan;. Kita juga boleh menggunakannya harta-peralihan: semua;, jika kami tidak mahu menentukan setiap harta secara berasingan.

Kita boleh memilih singkatan peralihan harta juga. Jika kita berbuat demikian, kita sentiasa perlu memberi perhatian kepada susunan yang betul sifat-sifat dalam (lihat sintaks dalam dokumen).

 .elemen latar belakang: oren; peralihan: latar belakang 3s mudah masuk;  .element: hover background: red; 

Sekiranya kita ingin membuat animasi, kita dikehendaki menentukan yang berkaitan keyframes. Ciri CSS perlu diubah suai secara berasingan @keyframes at-peraturan. Berikut adalah contoh bagaimana kita boleh melakukan ini:

 .elemen kedudukan: relatif; nama-animasi: slaid; tempoh animasi: 3s; animasi-fungsi masa: mudah masuk;  Slide @keyframes 0% left: 0;  50% kiri: 200px;  100% kiri: 400px; 

Dalam contoh di atas, kami mencipta kesan gelongsor yang sangat mudah. Kami menentukan nama-animasi, kemudian terikat 3 kerangka utama yang kami tentukan di dalam @keyframes slide ... at-peraturan. Peratusan merujuk kepada tempoh animasi, jadi 50% berlaku pada 1.5s dalam contoh.

Kita boleh menggunakan singkatan itu animasi harta juga, atau boleh mentakrifkan kerangka utama dengan lebih mudah daripada kepada memerintah dengan cara berikut:

 .elemen kedudukan: relatif; animasi: slaid 3s mudah masuk;  @keyframes slide dari left: 0;  ke kiri: 400px; 

Penciptaan animasi yang lebih kompleks adalah bentuk seni yang tersendiri, jika anda berminat, anda boleh membaca dua tutorial animasi kami tentang cara membuat tuan rumah maju, dan bagaimana membuat kesan lantunan.

Apabila membina peralihan dan animasi, anda perlu tahu itu tidak semua sifat CSS boleh dinyanyikan, jadi selalu merupakan idea yang baik untuk memeriksa harta yang ingin anda ubah dalam CSS Animatable.

Animasi dan peralihan CSS3 bekerja dengan awalan vendor untuk waktu yang lama, yang kami tidak perlu menggunakan lagi, namun Rangkaian Pengembang Mozilla masih mengesyorkan untuk menambah -webkit awalan untuk seketika, kerana sokongan untuk penyemak imbas berasaskan Webkit baru-baru ini mencapai kestabilan.