Diterjemahkan dari: transisi CSS 101
Bahasa Mandarin: Pengantar Transformasi CSS3
Penulis asli: Jason Cranford Teague
Penerjemah: Shen Fei
Harap hormati hak cipta dan sebutkan sumbernya saat mencetak ulang, terima kasih!
Meskipun orang-orang mengharapkan adanya perubahan pada layar, CSS dan HTML hanya dapat melakukan terlalu sedikit interaksi di halaman, dan hal tersebut masih perlu diterapkan dalam kode.
Misalnya, tautan memiliki warna ini atau warna itu; area teks sebesar atau sebesar itu; gambarnya transparan atau buram; mereka berubah secara langsung dari satu keadaan ke keadaan lainnya - di antaranya Tidak ada transisi .
Hal ini mengakibatkan sebagian besar halaman web menjadi agak kaku, karena elemen hanya berpindah atau berubah secara kaku.
Ya, Anda bisa berlebihan menggunakan DHTML, jQuery, atau menulis JS Anda sendiri, tetapi ini memerlukan lebih banyak kode untuk mengimplementasikan fungsi yang seharusnya sangat sederhana.
Yang kita butuhkan adalah cara cepat dan mudah untuk menambahkan efek transisi sederhana ke halaman. Pada artikel ini, Anda akan menemukan informasi berguna tentang transisi CSS dan cara menggunakannya.
Beberapa bulan yang lalu, saya menyarankan agar para desainer mulai menggunakan teknologi CSS 3 baru untuk mencapai beberapa fungsi dasar yang telah lama mereka dambakan - satu-satunya masalah adalah tidak satupun dari teknologi ini tersedia di IE, termasuk IE8.
Pandangan bahwa sebagian pembaca percaya bahwa teknologi tersebut tidak akan terlihat oleh 75% pengguna tidak dapat diandalkan.
Kepada para pembaca di luar sana saya ingin mengatakan, "Tunggu sebentar" karena saya akan memperkenalkan Anda pada properti CSS baru lainnya yang memungkinkan Anda menambahkan efek transformasi keren ke elemen apa pun hanya dengan beberapa baris kode.
Transformasi CSS baru saja diperkenalkan di CSS 3, namun telah ditambahkan sebagai ekstensi webkit. Artinya, kini hanya bisa digunakan di browser berbasis webkit, termasuk Apple Safari dan Google Chrome. Namun jika dilihat dari Opera 10.5 versi pra-Alpha, Opera akan mendukung transformasi CSS 3 di 10.5 berikutnya. Jadi untuk melihat efek sebenarnya yang disebutkan dalam artikel ini, sangat disarankan agar Anda menggunakan Chrome atau Safari 4 untuk melihat artikel ini .
Dari mana transformasi CSS berasal?Transformasi dulunya hanyalah bagian dari Webkit, dan dasar untuk beberapa hal keren yang dapat dilakukan Safari UI yang tidak dapat dilakukan oleh browser lain.
Namun, Kelompok Kerja CSS W3C menolak menambahkan transformasi ke fitur resminya, dengan beberapa anggota bersikeras bahwa transformasi bukanlah properti CSS dan akan lebih baik ditangani melalui skrip. (Saya sangat percaya diri. Saya memiliki sudut pandang serupa di paragraf sebelumnya dan mendiskusikannya dengan Gao Gao . Saya pikir animasi CSS berada di luar cakupan kinerja. Hal-hal interaktif harus diimplementasikan dengan skrip. Tapi nanti, di bawah bimbingan Saudara Gui , saya mulai Dengan pemahaman baru - Shen Fei)
Namun banyak desainer dan pengembang, termasuk saya sendiri, bersikeras bahwa ini memang gaya - hanya gaya dinamis , bukan gaya statis tradisional yang kita gunakan sehari-hari.
Untungnya, perdebatan gaya dinamis sudah berlalu. Maret lalu, perwakilan dari Apple dan Mozilla mulai menambahkan modul transformasi CSS ke fitur CSS 3 , sangat mirip dengan apa yang telah ditambahkan Apple ke WebKit.
Pengantar singkat tentang penyempurnaan desainSebelum melanjutkan, izinkan saya menekankan hal ini: Jangan pernah membuat fungsionalitas situs web bergantung pada suatu gaya jika gaya tersebut tidak bersifat universal browser (yaitu, didukung oleh semua browser yang umum digunakan).
Bagi yang melewatkannya, saya tekankan sekali lagi: Jangan biarkan fungsionalitas sebuah situs web bergantung pada gaya, jika gaya tersebut tidak bersifat universal di seluruh browser .
Meskipun demikian, Anda dapat menggunakan gaya, seperti transformasi, sebagai penyempurnaan desain untuk meningkatkan pengalaman pengguna—tanpa mengorbankan kegunaan bagi pengguna yang tidak dapat melihatnya. Jika berfungsi tanpa transformasi CSS dan pengguna masih dapat menyelesaikan tugasnya, tidak apa-apa dan Anda dapat menggunakan transformasi CSS.