Teknik animasi CSS3 yang perlu Anda ketahui

Penulis：Eve Cole Waktu Pembaruan：2025-01-15 17:37:54

Terjemahan: Teknologi animasi CSS3 yang perlu Anda ketahui

Diterjemahkan dari: Yang Perlu Anda Ketahui Tentang Perilaku CSS

Harap hormati hak cipta dan tunjukkan tautan ke situs ini saat mencetak ulang!

Penerjemahan Kata Pengantar: Artikel ini diterjemahkan dari Smashingmagazine, tetapi isi teks aslinya agak dangkal dan tidak terlalu lengkap. Pengamatan Front-end menambahkan konten yang semakin sistematis pada premis terjemahan. Jika ada kekurangan, mohon diperbaiki dan ditambahkan.

Seiring berkembangnya web dan browser menjadi lebih mampu merender kode yang lebih canggih, kami berada di jalur yang tepat untuk mencapai tujuan kami dalam menjangkau semua platform dan browser. Kami tidak hanya menghabiskan lebih sedikit waktu untuk memastikan model kotak kami terlihat normal di IE6, tetapi juga menciptakan suasana yang mendorong inovasi, menghindari peretasan, dan menekankan skrip front-end.

Internet adalah lingkungan yang hebat dan komunitas kolaboratif dengan banyak pengetahuan untuk dibagikan. Kami menginginkan sudut membulat , dan kami mewujudkannya; kami menginginkan banyak gambar latar belakang , dan kami mewujudkannya, kami menginginkan gambar tepi , dan kami mewujudkannya; Jadi permintaan tidak pernah menjadi masalah, jika tidak, kita mungkin masih menggunakan tabel untuk menata halaman dan menggunakan terlalu banyak kode. Kita semua tahu bahwa Internet dapat melakukan apa saja.

Lahir untuk Internet

Properti CSS 3 seperti border-radius, box-shadow , dan text-shadow mulai mendapatkan momentum di browser tingkat lanjut seperti webkit (Safari, Chrome, dll.) dan Gecko (Firefox). Mereka (properti CSS ini) sudah membuat halaman lebih ringan dan pengalaman lebih kaya bagi pengguna, dan mereka terdegradasi dengan baik. Namun, ini hanyalah beberapa dari banyak hal yang dapat dilakukan CSS 3 untuk kita.

Pada artikel ini, kita akan melangkah lebih jauh dan melihat teknik CSS3 tingkat lanjut seperti transformasi, transisi, dan animasi. Kami akan membahas kode itu sendiri, dukungan browser, dan beberapa contoh yang menunjukkan dengan tepat bagaimana properti baru ini dapat meningkatkan desain Anda dan pengalaman pengguna secara keseluruhan.

Transformasi CSS

Transformasi CSS adalah rancangan W3C. Tapi itu tidak mencerahkan saya ketika saya pertama kali duduk membaca semua fiturnya untuk mempelajari beberapa hal. Seperti yang dapat Anda bayangkan, dokumen ini ditulis dalam istilah teknis, dan lebih berfokus pada elemen dan matriks grafis yang terdeformasi (yaitu plot). Karena belum menyentuh matriks sejak mengambil tahun pertama kalkulus, saya harus melakukan banyak pengujian browser lama yang bagus dan menebak-nebak untuk bab ini.

Setelah membaca setiap tutorial yang saya temukan dan banyak pengujian browser, saya mendapatkan beberapa informasi berguna tentang transformasi CSS yang dapat dimanfaatkan oleh semua orang.

mengubah

Atribut transform mengimplementasikan beberapa fungsi yang sama yang dapat diimplementasikan dengan SVG. Ini dapat digunakan pada elemen sebaris dan elemen blok. Ini memungkinkan kita memutar, menskalakan, dan memindahkan elemen - hanya dengan satu baris kode CSS.

Kritik terbesar terhadap beberapa desain avant-garde adalah bahwa teks tidak dapat dipilih (harus diperoleh dengan memotong gambar). Ketika Anda sudah mahir menggunakan atribut transform untuk mengontrol teks, hal ini tidak lagi menjadi masalah, karena ini adalah metode CSS murni, sehingga teks di dalam elemen akan tetap opsional. Ini adalah keuntungan besar CSS dibandingkan menggunakan gambar (atau gambar latar belakang).

Beberapa fitur morphing yang menyenangkan dan berguna:

memutar

Putar memungkinkan Anda memutar objek dengan memberikan nilai dalam derajat.

skala

Skala adalah fungsi penskalaan yang dapat memperbesar elemen apa pun. Dibutuhkan angka positif dan negatif serta desimal sebagai argumen.

menerjemahkan

Terjemahkan elemen reposisi berdasarkan koordinat X dan Y

condong

Sesuai dengan namanya, skew adalah memiringkan suatu benda dan parameternya adalah derajatnya.

matriks

transform mendukung transformasi matriks, yaitu memposisikan ulang elemen berdasarkan koordinat X dan Y

Mari kita lihat lebih dalam setiap fiturnya.

Memutar

Atribut transform mempunyai banyak kegunaan, salah satunya adalah untuk menerjemahkan (rotasi). Terjemahan memutar objek berdasarkan sudut dan dapat digunakan untuk elemen sebaris dan elemen tingkat blok.

Berikut isi kutipannya:

#nav{
-transformasi webkit: putar(-90deg);
-moz-transformasi: putar(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotasi=3);
}

Harap dicatat bahwa di IE8 (mode non-standar) Anda harus menulis "-ms-filter" dan bukan "filter".

Dukungan peramban

Dukungan browser untuk terjemahan ternyata sangat luas. Pada cuplikan CSS di atas, kita cukup menambahkan awalan -webkit- dan -moz- dan memutar elemen #nav -90 derajat.

Cukup sederhana, bukan? Satu-satunya masalah adalah untuk elemen desain yang cukup penting, jika IE tidak mendukungnya, banyak desainer yang enggan menggunakannya.

Untungnya, IE memiliki filter untuk ini: filter rotasi grafis. Ini dapat memiliki 4 nilai rotasi: 0, 1, 2, dan 3. Anda tidak akan mendapatkan kontrol granular yang sama seperti Webkit dan Gecko, tetapi setidaknya akan konsisten (bahkan dengan IE6). Meskipun filter ini hanya mendukung 4 nilai, yang sepertinya tidak berguna, untuk IE, ini lebih baik daripada tidak sama sekali.

skala

Skala tidak bekerja seperti yang Anda pikirkan: skala hanya memperkecil dan memperbesar suatu elemen. Fungsi zoom mengambil nilai lebar dan tinggi, yang bisa positif, negatif, atau desimal.

Nilai positif memperbesar elemen, seperti yang Anda harapkan, berdasarkan lebar dan tinggi yang ditentukan.

Nilai negatif tidak mengecilkan elemen, tetapi membaliknya (misalnya, teks dibalik) dan menskalakannya sesuai. Namun, Anda dapat mengecilkan atau memperkecil suatu elemen menggunakan angka desimal kurang dari 1 (misalnya 0,5).

Berikut isi kutipannya:

#nav {
/* Lebar dan tinggi elemen nav akan digandakan*/
-transformasi webkit: skala(2);
-moz-transformasi: skala(2 }
#nav {
/* Lebar elemen nav akan digandakan, sedangkan tingginya tetap sama*/
-transformasi webkit: skala(2, 1);
-moz-transform: skala(2, 1);
}
#nav {
/* Lebar navigasi akan digandakan dan dibalik secara horizontal, namun tingginya akan tetap sama */
-transformasi webkit: skala(-2, 1);
-moz-transform: skala(-2, 1);
}

Dukungan peramban

Atribut skala saat ini hanya didukung oleh Firefox, Safari dan Chrome, dan sejauh ini tidak ada versi IE yang mendukungnya. Menskalakan suatu objek adalah pilihan desain yang cukup berarti. Ini dapat digunakan melalui peningkatan progresif: arahkan kursor, yang dapat menambah sedikit minat pada navigasi Anda.

Berikut isi kutipannya:

#nav li a: arahkan kursor{
/* Ini memungkinkan tautan navigasi Anda sedikit membesar ketika mouse melewatinya */
-transformasi webkit: skala(1.1); -moz-transformasi: skala(1.1);
}