Cara Menggunakan Transisi & Animasi CSS3 untuk Menyorot Perubahan UI

Desainer dan seniman memiliki sejarah panjang bereksperimen dengan gerak, efek, dan berbagai jenis ilusi dengan tujuan menambahkan lapisan tambahan pada karya mereka. Gerakan op art mulai menggunakan ilusi optik pada 1960-an untuk memberi kesan gerak.

Sejak itu pendekatan yang lebih baru dan lebih baru telah muncul, seperti seni kinetik baru-baru ini populer yang memperluas perspektif pemirsa dengan menggunakan gerakan multidimensi. Gerak juga muncul dalam ilmu komputer dengan penemuan kursor berkedip pertama pada tahun 1967.

Dalam pengembangan front-end, elemen DOM biasanya dianimasikan oleh JavaScript sebelum CSS3 dirilis, dan ini adalah metode yang masih berfungsi, tetapi properti baru yang diperkenalkan oleh CSS3 memungkinkan kami untuk meningkatkan desain kami dengan efek dan gerakan yang berbeda dengan cara yang lebih intuitif.

Dua teknik utama yang ditawarkan CSS3 adalah transisi dan animasi. Dalam posting ini kita akan melihat apa itu, apa perbedaan di antara mereka, dan bagaimana Anda dapat memanfaatkannya.

Transisi

Transisi dan animasi keduanya digunakan untuk memvisualisasikan perubahan di negara bagian dari elemen HTML oleh memodifikasi satu atau lebih dari properti CSS-nya.

Bentuk paling sederhana dari visualisasi perubahan status adalah mengubah warna tombol atau tautan saat melayang. Ketika itu terjadi, elemen mendapat gaya yang sedikit berbeda, yang biasanya dilihat oleh pemirsa seolah-olah ada sesuatu yang bergerak di layar.

Mengubah properti CSS dari tautan pada hover (atau fokus, atau klik) adalah bentuk transisi tertua dan paling sederhana, dan itu ada jauh sebelum era CSS3.

 a color: orange;  a: hover color: red;  a: focus color: blue;  a: visited color: green; 

Transisi digunakan ketika elemen HTML berubah dari satu kondisi yang telah ditentukan ke yang lain. CSS3 memperkenalkan properti baru yang memungkinkan visualisasi yang lebih canggih daripada sebelumnya, seperti fungsi pengaturan waktu atau durasi.

Kami akan melihat pada properti CSS baru di bagian selanjutnya, setelah memahami perbedaan animasi. Untuk saat ini, mari kita lihat hal-hal paling penting yang perlu Anda ketahui tentang transisi.

1. Mereka selalu memiliki kondisi awal dan akhir.
2. Status antara titik awal dan akhir secara implisit ditentukan oleh browser, kami tidak dapat mengubahnya dengan CSS.
3. Mereka membutuhkan pemicu eksplisit, seperti menambahkan pseudoclass baru dengan CSS, atau kelas baru dengan jQuery.

Anda dapat melihat contoh indah transisi CSS3 yang digunakan secara cerdas di bawah ini, di mana penulis mengungkapkan informasi tersembunyi dengan cara yang tidak mengganggu tetapi masih mengarahkan fokus pengguna pada konten baru..

Animasi

Jika kami ingin memvisualisasikan perubahan keadaan dengan gerakan yang lebih rumit, atau jika kami tidak memiliki pemicu eksplisit, mis. jika kita ingin memulai efek ketika halaman dimuat, animasi adalah cara untuk pergi.

Animasi memungkinkan untuk menentukan jalur yang lebih kompleks dengan menetapkan dan mengkonfigurasi jalur kita sendiri bingkai kunci. Bingkai kunci adalah titik perantara dalam proses animasi, yang memungkinkan kita untuk mengubah gaya elemen animasi sebanyak yang kita inginkan.

Meskipun CSS3 menawarkan cara hebat untuk membuat animasi yang canggih, biasanya lebih sulit untuk membuatnya daripada transisi, itu sebabnya ada banyak perpustakaan animasi yang bagus di luar sana, yang dapat memfasilitasi pekerjaan kami.

Hal terpenting yang perlu Anda ketahui tentang animasi CSS3 meliputi:

1. mereka tidak memerlukan pemicu eksplisit, mereka dapat mulai memuat halaman atau ketika acara DOM lain terjadi di browser
2. mereka dapat digunakan dalam kasus-kasus ketika transisi digunakan, misalnya ketika kelas baru atau pseudoclass ditambahkan atau dihapus (meskipun itu adalah kasus penggunaan yang kurang sering)
3. mereka mengharuskan kita untuk mendefinisikan beberapa keyframe (kondisi perantara)
4. kita dapat menentukan jumlah, frekuensi, dan gaya kerangka kunci ini

Pada contoh di bawah ini Anda dapat melihat menu dropdown animasi yang keren. Animasi dimulai ketika kita mengklik tombol. Ini dicapai dengan menambahkan kelas tambahan ke elemen daftar dengan jQuery ketika peristiwa klik terjadi.

Kelas-kelas baru ini dianimasikan dengan ditentukan @keyframe aturan dalam file CSS. Kelas tambahan dihapus oleh jQuery ketika pengguna mengklik tombol di waktu berikutnya, dan menu menjadi tersembunyi lagi.

Properti CSS dan @keyframe At-Rule

Untuk transisi, kita dapat menggunakan salah satu dari transisi properti singkatan, atau 4 properti terkait transisi tunggal: properti transisi, durasi transisi, transisi-waktu-fungsi, dan transisi-penundaan. Properti steno berisi semua properti tunggal dalam bentuk yang disingkat.

Untuk animasi ada animasi properti singkatan di tangan kami yang berdiri untuk tidak kurang dari 8 properti animasi tunggal, yaitu nama animasi, durasi animasi, fungsi animasi-waktu, animasi-penundaan, animasi-iterasi-hitung, arah animasi, mode animasi-isi-, dan animasi-play-state.

Yang paling penting dengan transisi dan animasi adalah kita selalu perlu menentukan properti CSS yang akan dimodifikasi selama perubahan status. Dengan transisi terlihat seperti ini:

 .element background: orange; properti transisi: latar belakang; durasi transisi: 3s; transisi-timing-fungsi: kemudahan-dalam;  .element: hover background: red; 

Kami menentukan Latar Belakang properti, karena ini adalah apa yang akan diubah selama masa transisi.

Kami dapat mengubah lebih dari satu properti CSS dalam satu transisi, dalam hal ini kode di atas akan dimodifikasi seperti ini: properti transisi: latar belakang, perbatasan;. Kita juga bisa menggunakan properti transisi: semua;, jika kita tidak ingin menentukan masing-masing properti secara terpisah.

Kita bisa memilih steno transisi properti juga. Jika kita melakukannya, kita selalu perlu memperhatikan urutan yang tepat dari sifat-sifat batin (lihat sintaks dalam dokumen).

 .element background: orange; transisi: background 3s easy-in;  .element: hover background: red; 

Jika kami ingin membuat animasi, kami harus menentukan yang terkait bingkai kunci. Properti CSS perlu dimodifikasi secara terpisah @keyframe at-rules. Ini adalah contoh bagaimana kita bisa melakukan ini:

 .element position: relative; nama animasi: slide; animasi-durasi: 3s; fungsi animasi-waktu: kemudahan-dalam;  @keyframes slide 0% left: 0;  50% kiri: 200px;  100% kiri: 400px; 

Pada contoh di atas kami membuat efek geser yang sangat sederhana. Kami mendefinisikan nama animasi, kemudian terikat 3 kerangka kunci untuk itu yang kami tentukan di @keyframes slide ... at-rules. Persentase mengacu pada durasi animasi, jadi 50% terjadi pada 1,5s dalam contoh.

Kita bisa menggunakan steno animasi properti juga, atau bisa mendefinisikan keyframe dengan yang lebih sederhana dari untuk aturan dengan cara berikut:

 .element position: relative; animasi: slide 3s easy-in;  @keyframes slide from left: 0;  ke kiri: 400px; 

Penciptaan animasi yang lebih kompleks adalah bentuk seninya sendiri, jika Anda tertarik, Anda dapat membaca dua tutorial animasi kami tentang cara membuat tenda besar, dan cara membuat efek pantulan.

Saat membangun transisi dan animasi, Anda perlu tahu itu tidak semua properti CSS dapat dianimasikan, jadi selalu ide yang baik untuk memeriksa properti yang ingin Anda ubah di CSS Animatable.

Animasi dan transisi CSS3 bekerja dengan awalan vendor untuk waktu yang lama, yang tidak harus kami gunakan lagi, namun Jaringan Pengembang Mozilla tetap merekomendasikan untuk menambahkan -webkit awalan untuk sementara waktu, karena dukungan untuk browser berbasis Webkit baru-baru ini mencapai stabilitas.