Saat ini, semakin banyak website yang menggunakan animasi, baik dalam bentuk GIF, SVG, WebGL, video latar dan lain sebagainya. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktifitas, menambahkan lapisan tambahan untuk meningkatkan pengalaman pengguna website. Show Pada tutorial ini, saya akan memperkenalkan anda kepada animasi CSS; sebuah cara untuk menambahkan animasi dengan performa terbaik yang menjadi semakin populer seiring dengan yang meningkat. Selesai dengan pembahasan dasar, kita akan membuat contoh kecil dengan membuat animasi dengan mengubah sebuah kotak menjadi sebuah lingkaran: Pengenalan @keyframes dan AnimasiKomponen utama dari animasi CSS adalah 0% {67, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan 0% {67 sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam 0% {67, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda. Selanjutnya, agar animasi berjalan, anda perlu mengaitkan 0% {67 tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam 0% {67 dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan. @keyframesDi sini kita akan mengatur tahapan animasi. Properti-properti di dalam 0% {67 kita adalah:
Contoh: 1 @keyframes tutsFade { 2 0% { 3 opacity: 1; 4 }
5 100% { @keyframes tutsFade {0 @keyframes tutsFade {1 @keyframes tutsFade {2 }
@keyframes tutsFade {4 @keyframes tutsFade {5 atau: 1 @keyframes tutsFade { 2 @keyframes tutsFade {9 3 opacity: 1; 4 }
5 25 @keyframes tutsFade {0 @keyframes tutsFade {1 @keyframes tutsFade {2 }
@keyframes tutsFade {4 @keyframes tutsFade {5 atau dengan shorthand: 1 @keyframes tutsFade { 2 25 3 @keyframes tutsFade {1 4 }
5 @keyframes tutsFade {5 Kode di atas akan menerapkan sebuah efek transisi terhadap opacity dari sebuah elemen, dari 0% {73 menjadi 0% {74. Masing-masing dari contoh di atas akan menghasilkan hasil akhir yang sama. AnimasiProperti 0% {75 digunakan untuk memanggil 0% {67 ke dalam sebuah selector CSS. Animasi dapat memiliki beberapa properti sebagai berikut:
Contohnya: 1 33 2 35 3 37 4 39 5 opacity: 1;1 @keyframes tutsFade {0 opacity: 1;3 @keyframes tutsFade {2 opacity: 1;5 @keyframes tutsFade {4 @keyframes tutsFade {5 atau dengan menggunakan shorthand: 1 33 2 41 3 @keyframes tutsFade {5 Kode di atas akan mencipatakan efek kedip, dengan waktu tunda 1 detik, 4 detik total durasi animasi, dengan arah berbalik dan putaran loop tanpa batas. Menambahkan Awalan VendorSelama masih menjadi working draft, kita butuh menambahakan properti 0% {85 dengan awalan khusus untuk memastikan dukungan terbaik browser. Standard awalan ini adalah:
Sebuah properti 0% {85 dengan menggunakan awalan akan nampak seperit berikut: 1 33 2 47 3 49 4 }
15 }
3@keyframes tutsFade {0 }
5@keyframes tutsFade {2 @keyframes tutsFade {5 begitu pula dengan 0% {67: 1 }
92 51 3 53 4 55 5 57 Agar mudah terbaca, saya akan melanjutkan tutorial ini dengan tanpa menggunakan awalan, namun versi akhir akan menyertakan awalan khusus untuk semua browser dan saya juga mendorong anda untuk menggunakan awalan pada kode CSS anda. Untuk mengetahui lebih lanjut tentang awalan vendor, anda dapat melihat http://css3please.com/. Menambahkan Banyak AnimasiAnda dapat menambahkan banyak animasi ke dalam satu elemen dengan menggunakan tanda koma sebagai tanda pemisah. Katakan kita ingin menambahkan rotasi pada elemen 0% {92, kita dapat melakukannya dengan membuat 0% {67 tambahan dan kemudian mengaitkannya ke dalam element kita, seperti ini: 1 33 2 100% {1 3 100% {3 4 @keyframes tutsFade {5 5 @keyframes tutsFade { @keyframes tutsFade {0 25 @keyframes tutsFade {2 @keyframes tutsFade {1 @keyframes tutsFade {4 }
@keyframes tutsFade {04 @keyframes tutsFade {5 @keyframes tutsFade {06 @keyframes tutsFade {07 @keyframes tutsFade {08 25 @keyframes tutsFade {10 @keyframes tutsFade {11 @keyframes tutsFade {12 }
@keyframes tutsFade {14 @keyframes tutsFade {5 Tutorial Mengubah Kotak manjadi LingkaranSekarang, mari kita membuat contoh bentuk animasi sederhana; dengan mengubah kotak menjadi lingkaran dengan menggunakan prinsip yang telah kita bahas di atas. Kita akan memiliki total lima tahapan dan untuk masing-masing tahapan kita akan mendefinisikan sebuah border-radius, sebuah rotasi dan sebuah latar warna berbeda untuk elemen kita. Elemen DasarPertama, mari kita susunan markup-nya, yaitu elemen yang akan kita animasikan. Kita tidak akan menambahkan kelas, kita hanya akan menggunakan sebuah div: 1 @keyframes tutsFade {17 Kemudian, dengan menggunakan sebauh selector ( 0% {94), tambahkan styling dasar untuk div tersebut: 1 @keyframes tutsFade {19 2 @keyframes tutsFade {21 3 @keyframes tutsFade {23 4 @keyframes tutsFade {25 5 @keyframes tutsFade {5 Membuat KeyframesSekarang mari kita siapkan 0% {67, yang akan kita beri nama 0% {96, berserta lima tahapannya. 1 @keyframes tutsFade {29 2 @keyframes tutsFade {31 3 @keyframes tutsFade {33 4 @keyframes tutsFade {35 5 @keyframes tutsFade {37 @keyframes tutsFade {0 @keyframes tutsFade {39 @keyframes tutsFade {2 @keyframes tutsFade {5 Kita perlu menentukan styles untuk masing-masing tahapan di atas, jadi mari kita mulai dengan menentukan besaran 0% {97 untuk masing ujung kotak. 1 @keyframes tutsFade {43 2 @keyframes tutsFade {45 3 @keyframes tutsFade {47 4 }
5 @keyframes tutsFade {51 @keyframes tutsFade {0 @keyframes tutsFade {53 @keyframes tutsFade {2 }
@keyframes tutsFade {4 @keyframes tutsFade {57 @keyframes tutsFade {04 @keyframes tutsFade {59 @keyframes tutsFade {06 }
@keyframes tutsFade {08 @keyframes tutsFade {63 @keyframes tutsFade {10 @keyframes tutsFade {65 @keyframes tutsFade {12 }
@keyframes tutsFade {14 100% { @keyframes tutsFade {70 @keyframes tutsFade {71 @keyframes tutsFade {72 }
@keyframes tutsFade {74 @keyframes tutsFade {5 Sebagai tambahan, kita akan memberikan sebuah 0% {98 berbeda di masing-masing tahapan. 1 @keyframes tutsFade {29 2 @keyframes tutsFade {45 3 @keyframes tutsFade {47 4 @keyframes tutsFade {83 5 }
@keyframes tutsFade {0 @keyframes tutsFade {51 @keyframes tutsFade {2 @keyframes tutsFade {53 @keyframes tutsFade {4 @keyframes tutsFade {91 @keyframes tutsFade {04 }
@keyframes tutsFade {06 @keyframes tutsFade {57 @keyframes tutsFade {08 @keyframes tutsFade {59 @keyframes tutsFade {10 @keyframes tutsFade {99 @keyframes tutsFade {12 }
@keyframes tutsFade {14 203 @keyframes tutsFade {70 @keyframes tutsFade {65 @keyframes tutsFade {72 207 @keyframes tutsFade {74 }
210 211 212 @keyframes tutsFade {71 214 215 216 }
218 @keyframes tutsFade {5 Untuk membuatnya lebih menarik, selain 0% {97 dan 0% {98, kita juga akan merotasi div. 1 @keyframes tutsFade {29 2 @keyframes tutsFade {45 3 @keyframes tutsFade {47 4 227 5 229 @keyframes tutsFade {0 }
@keyframes tutsFade {2 @keyframes tutsFade {51 @keyframes tutsFade {4 @keyframes tutsFade {53 @keyframes tutsFade {04 215 @keyframes tutsFade {06 239 @keyframes tutsFade {08 }
@keyframes tutsFade {10 @keyframes tutsFade {57 @keyframes tutsFade {12 @keyframes tutsFade {59 @keyframes tutsFade {14 @keyframes tutsFade {99 @keyframes tutsFade {70 249 @keyframes tutsFade {72 }
@keyframes tutsFade {74 203 210 @keyframes tutsFade {65 212 207 214 259 216 }
218 211 264 @keyframes tutsFade {71 266 215 268 269 270 }
272 @keyframes tutsFade {5 Menerapkan AnimasiSetalah kita mendefinisikan animasi square-to-circle, kita akan menerapkannya ke dalam div: 1 @keyframes tutsFade {19 2 @keyframes tutsFade {21 3 @keyframes tutsFade {23 4 281 5 283 @keyframes tutsFade {0 @keyframes tutsFade {5 Di sini anda melihat kita telah menambahkan porperti 0% {85 shorthand, yang menyatakan:
Menggunakan Timing-FunctionSatu nilai terakhir yang dapat kita tambahkan pada properti 0% {85 adalah 0% {80. Ini akan menentukan kecepatan, percepatan, dan perlambatan dari pergerakan animasi kita. Fungsi ini dapat memiliki nilai yang sangat detail, yang akan cukup sulit untuk dihitung secara manual, namun ada banyak website gratis yang menyediakan layanan untuk menghitung fungsi waktu animasi ini. Salah satu alat tersebut adalah CSS Easing Animation Tool, jdai kita akan menggunakannya untuk menentukan nilai dari fungsi waktu. I would like to add an elastic effect to our 0% {96 animation, using a cubic-bezier function. Saya ingin menambahkan sebuah efek elastis untuk animasi 0% {96 kita, dengan menggunakan nilai cubic-bezier. Setelah bermain dengan alat ini dan menghasilkan beberapa macam kurva bezier, perbarui nilai dari timing-function dengan seperti yang terlihat pada kode di bawah ini. 1 @keyframes tutsFade {19 2 @keyframes tutsFade {21 3 @keyframes tutsFade {23 4 281 5 295 @keyframes tutsFade {0 @keyframes tutsFade {5 Kode akhir, tanpa tambahan awalan vendor ( 0% {86 , 0% {87, 0% {89, 0% {88 ) adalah sebagai berikut: 1 @keyframes tutsFade {19 2 @keyframes tutsFade {21 3 @keyframes tutsFade {23 4 281 5 0% {07 @keyframes tutsFade {0 @keyframes tutsFade {5 @keyframes tutsFade {2 @keyframes tutsFade {4 @keyframes tutsFade {29 @keyframes tutsFade {04 @keyframes tutsFade {45 @keyframes tutsFade {06 @keyframes tutsFade {47 @keyframes tutsFade {08 227 @keyframes tutsFade {10 229 @keyframes tutsFade {12 }
@keyframes tutsFade {14 @keyframes tutsFade {51 @keyframes tutsFade {70 @keyframes tutsFade {53 @keyframes tutsFade {72 215 @keyframes tutsFade {74 239 210 }
212 @keyframes tutsFade {57 214 @keyframes tutsFade {59 216 @keyframes tutsFade {99 218 249 264 }
266 203 268 @keyframes tutsFade {65 270 207 272 259 0% {51 }
0% {53 211 0% {55 @keyframes tutsFade {71 0% {57 215 0% {59 269 0% {61 }
0% {63 @keyframes tutsFade {5 Satu Hal TerakhirSemuanya berjalan dengan baik di browser terkini, tapi Firefox mempunya kebiasaan yang buruk dalam menampilkan transformasi obyek. Lihatlah garis-garis yang bergerigi berikut untuk melihat apa yang saya maksud. Untungnya, ada cara untuk menyelesaikan masalah ini. Yaitu dengan mengubah outline pada div tersebut menjadi transparan seperti di bawah ini dan Firefox akan menampilkannya dengan sempurna! 1 0% {66 SimpulanKita telah menggunakan animasi CSS untuk membuat sebuah contoh sederhana, animasi berulang. Dukungan BrowserSebagai informasi terkini dukungan browser untuk animasi CSS, silakan lihat tapi secara singkat, browser yang telah mendukungan animasi termasuk: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+ |