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 itu; area teks sebesar atau sebesar itu; gambarnya transparan atau buram; mereka berubah secara langsung dari satu keadaan ke keadaan lainnya - ;
Hal ini menyebabkan 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 perlukan 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 tidaklah dapat diandalkan.
Kepada para pembaca tersebut, 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 desain
Sebelum kita melanjutkan, izinkan saya menekankan hal ini: Jangan pernah membuat fungsionalitas situs web bergantung pada suatu gaya jika gaya tersebut tidak universal untuk browser (yaitu, didukung oleh semua browser yang umum digunakan).
Saya tekankan lagi bagi yang melewatkannya: Jangan biarkan fungsionalitas situs web bergantung pada gaya, jika gayanya tidak universal di seluruh browser .
Artinya, Anda dapat menggunakan gaya, seperti transisi, 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.
Diterjemahkan dari: transisi CSS 101
Bahasa Mandarin: Memulai Transformasi CSS3 Penulis Asli: Jason Cranford Teague
Penerjemah: Shenfei harap hormati hak cipta dan sebutkan sumbernya saat mencetak ulang.