Animasi CSS3: gangguan dan bug yang harus hindari

() translation by (you can also view the original English article)

Animasi CSS3 itu cukup keren. karenannya dapat memungkinkan kita untuk memberikan tampilan yang lebih hidup pada perangkat keras untuk website yang sebelumnya membosankan. namun, ada beberapa kesulitan tersembunyi dan kealian praktek yang harus anda ketahui - mari kita gali.

Browser yang mendukung CSS3 semakin memanas - Mozilla Firefox telah bergabung dalam dukungan penuh dengan WebKit, dan Internet Explorer 10 serta Opera 12 telah berjanjikan dukungan di masa mendatang. Dengan ini berarti kita bisa mulai menggunakannya tanpa rasa takut hari ini. Namun, dukungan yang berkembang ini tidak datang tanpa masalah.

Bukan Android Yang Kita Cari

Selama ini Webkit yang lahir-dan-mulai membesarkan properti lalu Anda ingin animasi CSS dapat memiliki dukungan penuh di semua browser WebKit. Sayangnya, itu tidak sesederhana itu. Peramban yang dibangun ke perangkat Android sudah mendukung animasi - hingga taraf tertentu. Masalahnya, itu hanya akan mendukung animasi dengan satu perubahan properti.

Jadi katakanlah kita ingin bekerja menggunakan kerangka animasi saya, Animate.css, untuk membuat situs web yang sangat keren. Sebagian besar animasi seperti bounceInLeft akan bekerja dengan baik di Chrome, Safari, Firefox, dan Safari iOS terbaru. Tetapi pada perangkat Android, pengguna tidak dapat melihat elemen animasi tunggal. Animasi berjalan, tetapi elemen akan segera menghilang setelah selesai.

Maksud dari perkataan aneh ini bahwa satu-satunya animasi yang dapat kita jalankan di perangkat Android adalah hanya satu properti, seperti fadeIn dan bounce. Sayangnya, tidak jelas apakah Android 4.0 akan memberikan dukungan yang lebih baik - semoga itu akan terjadi.

The Animatecss home page shows absolutely nothing on Android devices

Hingga kita dapat melihat dukungan yang lebih besar dari perangkat Android ini, taruhan terbaik Anda adalah memberikan fallback Javascript atau animasi yang lebih kompleks. Tapi bagaimana Anda bisa memberitahu situs Anda untuk tidak menggunakan animasi super keren Anda di perangkat ini? Menggunakan Modernizr tidak akan membantu di sini - ini akan mendeteksi bahwa browser mendukung animasi. Untungnya, kami dapat memeriksa agen pengguna, dan menayangkan alternatif stylesheet atau script. Di PHP, semudah ini:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  $css = "droid-style.css";
} else {
	$css = "style.css";
}

Cuplikan itu akan memuat droid-style.css pada perangkat Android, yang berarti kita dapat menyimpan animasi celana panjang kita untuk browser yang dapat menggunakannya. Luar biasa!

Untuk 2D, Tekan 3D

Perangkat iOS seperti iPhone dan iPad memiliki dukungan besar untuk animasi CSS3, dengan akselerasi perangkat keras penuh - tetapi hanya jika itu adalah transformasi 3D. Jika animasi tidak melibatkan transformasi 3D, maka akan dipercepat sepenuhnya oleh perangkat lunak, yang dapat menghasilkan animasi laggy.

Untuk mendapatkan akselerasi perangkat keras penuh pada animasi, Anda perlu mengaktifkan mesin render 3D. Itu semudah menambahkan aturan ini ke CSS Anda:

1	.container {
2	-webkit-transform: translateZ(0);
3	}

Bagus! Tapi mengapa tidak menerapkan aturan ini ke body? Nah, untuk beberapa alasan, mengaktifkan mesin 3D dapat memainkan sedikit tata letak halaman. Elemen yang diposisikan secara tetap atau benar-benar akan bergeser sedikit jika ini diterapkan ke body.

Seperti seluruh halnya di dunia CSS3, trik pintar ini membutuhkan usaha. Tidak terlalu rumit, tapi tetap dengan usaha. Lihatlah perbandingan ilmiah ini:

Antialiasing screws up with the active 3d rendering engine

Itu membutuhkan mata yang tajam untuk melihatnya, tetapi mengaktifkan mesin rendering 3D membuat antialiasing teks grayscale - ini menghasilkan teks yang sedikit lebih tajam, dan itu terutama terlihat pada ukuran teks yang sangat kecil atau sangat besar. Seperti yang saya katakan, itu bukan masalah besar, tapi itu masih bug. Menambahkan -webkit-font-smoothing: antialiased; dapat membantu mengurangi sedikit masalah pada browser Webkit.

Masalah Dengan Transformasi

Mari kita bayangkan Anda perlu memindahkan elemen dari satu tempat ke tempat lain, tanpa itu mempengaruhi tata letak halaman. translate adalah sahabat terbaik Anda di sini - properti penterjemah, sebagaimana didefinisikan oleh W3C:

... tidak mempengaruhi alur konten di sekitar elemen yang diubah. Namun, nilai area disekitarnya dapat memperhitungkan elemen-elemen yang ditransformasikan.

Lihat itu? Itu tidak mempengaruhi aliran konten di sekitarnya. Tapi itu mempengaruhi meluapnya dokumen. Ini berarti bahwa jika Anda memindahkan cara elemen dari halaman (yang merupakan kasus untuk beberapa animasi di Animate.css), itu akan menyebabkan scrollbars.

Beberapa browser memperlakukan perilaku ini sedikit berbeda di antara browser tersebut. Safari dan Chrome akan membuat scrollbar, tetapi kemudian setelah transformasi selesai dan opacity elemen yang ganti menjadi nol, itu akan menghapus scrollbar, seolah-olah elemen telah dihapus. Firefox, di sisi lain, membuat gulir persisten yang akan tetap ada hingga elemen dihapus dari dokumen atau diatur ke display: none. Cara terbaik untuk bekerja dengan transformasi ini adalah menggunakan sedikit sihir Javascript. Jika Anda mengetahui panjang animasi Anda, Anda harus menghapus elemen dari DOM setelah animasi itu selesai. Alternatifnya, Anda bisa memperhatikan ketika animasi selesai dengan beberapa kecerdasan Javascript :

var element = document.getElementById("#box");
element.addEventListener("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
}, false);
document.getElementById("#button").onclick = function(){
    element.style.webkitAnimationName = "shake";
    // you'll probably want to preventDefault here.
};

Potongan kecil ini sebenarnya berasal dari a Stack Overflow thread. Ini bagus, jadi tandailah!

Melawan Flash

Jika Anda menulis animasi CSS Anda sendiri, Anda mungkin melihat sesuatu yang aneh pada perangkat Safari, Chrome, dan iOS. Tepat sebelum animasi berjalan, elemen animasi yang dipermasalahkan akan masuk dan keluar dari visibilitas sesaat sebelum dimulai.

Alasan di balik fenomena ini tidak jelas, tetapi perbaikannya cukup sederhana. Cukup tambahkan -webkit-backface-visibility: hidden; aturan ke CSS Anda harus membantu mencegah masalah. Menerapkannya ke container elemen, seperti:

1	.container {
2	-webkit-backface-visibility: hidden;
3	}

Ini bermuara pada masalah akselerasi perangkat keras lainnya - gunakan properti ini cukup dengan akselerasi ke dalam gear. Anda juga bisa menggunakan hal-hal seperti -webkit-perspektive: 1000; atau properti 3D lainnya.

Pseudo Elements dan Z-index

Inilah beberapa kebenaran yang tidak menguntungkan dengan animasi dan transisi CSS. Anda tidak dapat menggunakan animasi atau transisi pada pseudo elements. Fakta ini agak kurang didokumentasikan di web, tapi ini yang penting. katakanlah, misalnya, Anda menginginkan :after pseudo element untuk memudar menjadi visibilitas ketika Anda mengarahkan kursor kearah induknya. Sayangnya, itu akan membuat hentakan antar bagian, bukan transisi dengan anggun. Sejauh yang kita tahu, ini adalah perilaku yang tidak biasa: ada laporan bug yang diajukan untuk Chrome dan Webkit - dan Firefox benar-benar mendukung transisi ini. Anda dapat mengikuti status dukungan saat ini untuk transisi & animasi pada elemen semu di trik-CSS.

Namun, perlu dicatat bahwa jika Anda menerapkan transisi atau animasi ke elemen yang memiliki elemen pseudo, transisi tersebut akan dilakukan melalui elemen pseudo.

Dan sekarang untuk tendangan lain di gigi. Transisi dan animasi mengatur ulang z-index dari suatu objek. Jika Anda memiliki objek yang disusun dengan baik dan ingin Anda animasikan, mereka akan mengatur ulang susunan pesanan. Ini adalah kebenaran yang tidak menguntungkan dan sekali lagi, tidak banyak yang dibicarakan orang.

Gerak Realistis

Saya mungkin akan masuk ke air (materi) yang cukup dalam di sini, tetapi Anda dapat membuat animasi Anda jauh lebih realistis dengan bermain dengan fungsi waktu. Jika Anda hanya membiarkan fungsi waktu default untuk animasi (kemudahan), Anda bisa mendapatkan efek yang cukup bagus. Namun, jika Anda mencoba membuat ulang pola gerak tertentu dalam CSS, penting untuk mempelajari perbedaan antara fungsi waktu yang berbeda. Mari kita ambil animasi 'engsel' dari Animate.css sebagai contoh.

Ide di balik animasi ini adalah agar elemen itu jatuh dari posisinya saat ini, berayun dari satu sudut untuk beberapa saat, lalu turun sepenuhnya - seperti tanda yang rusak. Inilah tangkapannya - animasi akan membutuhkan berbagai fungsi waktu untuk membuatnya realistis. Pikirkan tentang gerakan ini dalam kehidupan nyata; ketika tanda itu jatuh dan mulai berayun, tanda itu akan mulai perlahan, lalu mempercepat, lalu pelan-pelan kembali ke puncaknya. Namun, ketika itu turun sepenuhnya, itu harus turun cukup tiba-tiba dan mempercepat saat jatuh. Kedengarannya seperti kita membutuhkan ease-in-out dan ease-in.

Sebenarnya sangat mudah. Di dalam bingkai utama Anda, Anda dapat mendeklarasikan fungsi waktu yang berbeda - seperti ini:

@keyframes hinge {
	0% {
		animation-timing-function: ease-in-out;
		transform: rotate(-120deg);
		transform-origin: top left;
	}

	25% {
		animation-timing-function: ease-in-out;
		transform: rotate(70deg);
		transform-origin: top left;
	}

	50% {
		animation-timing-function: ease-in-out;
		transform: rotate(-120deg);
		transform-origin: top left;
	}

	100% {
		animation-timing-function: ease-in;
		transform: rotate(0deg) translateY(200%);
	}
}

Dengan menggunakan berbagai fungsi waktu, bukan hanya yang baku, kami memiliki kontrol lebih besar terhadap bagaimana animasi dimainkan. Jika Anda menjalankan animasi engsel tanpa fungsi waktu kustom, Anda dapat melihat betapa anehnya itu muncul. saat menulis animasi Anda, bandingkan dengan contoh kehidupan nyata dari gerakan yang sama. Perlambat dalam pikiran Anda, dan pikirkan bagaimana masing-masing waktunya.

Jangan Desain Seperti 1999

Ini mungkin yang paling penting yang kamu ambil, jadi dengarkan. Saya sangat percaya bahwa animasi CSS ada di sana untuk digunakan secara hemat untuk interaksi tambahan, dan tidak lebih. Orang-orang pintar seperti Anthony Calzadilla membuat beberapa hal keren dengan animasi CSS, tetapi menurut pendapat saya, di dunia nyata animasi ini harus sedikit dan berjauhan.

Ambil halaman ini sebagai contoh. Semuanya di sini (kecuali gif animasi wajib) dianimasikan menggunakan CSS. Ini adalah contoh ekstrem, tetapi Anda dapat melihat mengapa saya khawatir tentang penggunaan yang berlebihan dari hal-hal ini.

Hal yang sama berlaku untuk semua properti CSS3. Transisi, bayangan, dan gradien harus digunakan dengan halus. Saya pikir halaman arahan untuk Owlr membuat contoh yang cukup bagus. Mengirimkan email yang tidak valid atau formulir kosong akan membuat kesalahan validasi dengan beberapa animasi yang tidak penting untuk menarik perhatian.

Dalam bukunya CSS3 For Web Designers, (ini merupakan bacaan yang luar biasa) Dan Cederholm berbicara banyak tentang "pengalaman berlapis". Dia menekankan poin bahwa semua nilai CSS3 yang ditunjukkan dalam bukunya adalah untuk lapisan pengalaman tambahan saja - efek yang ditambahkan tidak penting, dan harus selalu terdegradasi dengan anggun dalam browser yang tidak sepenuhnya mendukung mereka. Ingat aturan ini, dan Anda akan menjadi lebih kuat daripada yang bisa Anda bayangkan. Atau semacam itu.

Masalah kinerja

Sebagian besar komputer memiliki daya yang lebih dari cukup untuk menjalankan animasi dan transisi CSS3 tanpa masalah - namun, semakin Anda mencoba untuk memompa kinerja CSS Anda, maka akan semakin memengaruhi kinerja.

Sebagai contoh animasi sederhana yang menggerakkan div dari kiri ke kanan tanpa batas. sebuah barang yang sederhana. Mari kita buat kotak ini sedikit lebih menarik - berikan bayangan pada kotak, bayangan teks, mungkin gradien ... semua aturan ini akan memengaruhi kinerja laman. Jika Anda memberi div Anda sebuah kotak bayangan dengan radius blur yang konyol (saya berbicara secara umum di sini), Anda akan melihat penurunan kinerja yang parah. Browser bekerja sangat keras untuk mencari tahu bagaimana seharusnya membuat piksel yang membentuk kotak bayangan yang mulai memonopoli sumber yang dibutuhkan oleh animasi, atau bahkan sisa halaman - pekerjaan sederhana seperti menggulir dapat menjadi sangat lambat. Pertahankan peningkatan visual seminimal mungkin, terutama pada bayangan.

Akselerasi perangkat keras dapat membantu mencegah masalah ini, tetapi ini masih merupakan masalah yang harus diperhatikan. Tidak semua pengguna Anda akan memiliki kemewahan akselerasi perangkat keras, dan grafis yang diberikan perangkat lunak dapat membawa pengaruh yang buruk pada komputer.

Kesimpulan

Mudah-mudahan Anda lebih sadar akan beberapa jebakan dalam animasi CSS3 dan semua tuntutan lintas browsernya daripada sebelumnya. Tetapi jangan lupa bahwa fitur CSS3 ini masih sangat menarik dan tersedia untuk digunakan saat ini. Dukungan terus berkembang, dan itu menandakan sebuah dunia di mana kita dapat menjauh dari Javascript untuk efek visual - yang merupakan hal yang hebat jika Anda bertanya kepada saya.

Saya akan menyelesaikan dengan kaedah sederhana yang dapat mudah diingat ini:

“Konten dan fungsi Anda lebih diprioritaskan daripada yang lainnya. Jika Anda menemukan diri Anda menggunakan fitur CSS3 apa pun, pastikan bahwa situs Anda akan berfungsi dengan cara yang sama untuk setiap pengguna tanpa ada perbedaan diantara mereka. ”

Sumber Tambahan

Jika Anda bosan sampai menarik-narik rambut karena bug yang membingungkan, periksa Envato Studio di mana Anda dapat meminta bantuan dari pengembang pilihan yang suka menipu serangga dan membuat perbaikan!