Pengenalan Animasi CSS bagi Pemula

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.

Pada tutorial ini, saya akan memperkenalkan anda kepada animasi CSS; sebuah cara untuk menambahkan animasi dengan performa terbaik yang menjadi semakin populer seiring dengan dukungan browser yang meningkat. Selesai dengan pembahasan dasar, kita akan membuat contoh kecil dengan membuat animasi dengan mengubah sebuah kotak menjadi sebuah lingkaran.

Pengenalan @keyframes dan Animasi

Komponen utama dari animasi CSS adalah @keyframes, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan @keyframes sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam @keyframes, anda dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.
Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.

@keyframes

Di sini kita akan mengatur tahapan animasi. Properti-properti di dalam @keyframes kita adalah:

• Nama animasi (tutsFade dalam contoh ini).
• Tahapan: 0%-100%; dari (sama dengan 0%) dan hingga (sama dengan 100%).
• Style CSS: style yang anda ingin aplikasikan dalam setiap tahapannya.

Contoh:

@keyframes tutsFade {   0% {     opacity: 1;   }   100% {     opacity: 0;   } }

atau:

@keyframes tutsFade {   from {     opacity: 1;   }   to {     opacity: 0;   } }

atau dengan shorthand:

@keyframes tutsFade {   to {     opacity: 0;   } }

Kode di atas akan menerapkan sebuah efek transisi terhadap opacity dari sebuah elemen, dari opacity: 1 menjadi opacity: 0. Masing-masing dari contoh di atas akan menghasilkan hasil akhir yang sama.

Animasi

Properti animasi digunakan untuk memanggil @keyframes ke dalam sebuah selector CSS. Animasi dapat memiliki beberapa properti sebagai berikut:

• animation-name: nama @keyframes (ingat kita memilih tutsFade).
• animation-duration: durasi animasi, total durasi dari animasi dari awal hingga akhir.
• animation-timing-function: mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
• animation-delay: durasi tunda ebelum animasi kita mulai.
• animation-iteration-count: jumlah penambahan dalam animasi.
• animation-direction: memberi anda kemampuan untuk mengubah arah loop, dari awal hingga akhir, atau dari akhir hingga awal, atau keduanya.
• animation-fill-mode: menentukan style yang akan di terapkan ke dalam elemen ketika animasi kita selesai ( none | forwards | backwards | both )

Contohnya:

.element {   animation-name: tutsFade;   animation-duration: 4s;   animation-delay: 1s;   animation-iteration-count: infinite;   animation-timing-function: linear;   animation-direction: alternate; }

atau dengan menggunakan shorthand:

.element {   animation: tutsFade 4s 1s infinite linear alternate; }

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 Vendor

Selama masih menjadi working draft, kita butuh menambahakan properti animation dengan awalan khusus untuk memastikan dukungan terbaik browser. Standard awalan ini adalah:

• Chrome & Safari: -webkit-
• Firefox: -moz-
• Opera: -o-
• Internet Explorer: -ms-

Sebuah properti animation dengan menggunakan awalan akan nampak seperit berikut:

.element {     -webkit-animation: tutsFade 4s 1s infinite linear alternate;     -moz-animation: tutsFade 4s 1s infinite linear alternate;     -ms-animation: tutsFade 4s 1s infinite linear alternate;     -o-animation: tutsFade 4s 1s infinite linear alternate;     animation: tutsFade 4s 1s infinite linear alternate; }

begitu pula dengan @keyframes:

@-webkit-keyframes tutsFade { /* your style */ } @-moz-keyframes tutsFade { /* your style */ } @-ms-keyframes tutsFade { /* your style */ } @-o-keyframes tutsFade { /* your style */ } @keyframes tutsFade { /* your style */ }

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 Animasi

Anda dapat menambahkan banyak animasi ke dalam satu elemen dengan menggunakan tanda koma sebagai tanda pemisah. Katakan kita ingin menambahkan rotasi pada elemen tutsFade, kita dapat melakukannya dengan membuat @keyframes tambahan dan kemudian mengaitkannya ke dalam element kita, seperti ini:

.element {    animation: tutsFade 4s 1s infinite linear alternate,              tutsRotate 4s 1s infinite linear alternate; } @keyframes tutsFade {   to {     opacity: 0;   } } @keyframes tutsRotate {   to {     transform: rotate(180deg);   } }

Tutorial Mengubah Kotak manjadi Lingkaran

Sekarang, 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 Dasar

Pertama, mari kita susunan markup-nya, yaitu elemen yang akan kita animasikan. Kita tidak akan menambahkan kelas, kita hanya akan menggunakan sebuah div:

<div></div>

Kemudian, dengan menggunakan sebauh selector (div {}), tambahkan styling dasar untuk div tersebut:

div {   width: 200px;   height: 200px;   background-color: coral; }

Membuat Keyframes

Sekarang mari kita siapkan @keyframes, yang akan kita beri nama square-to-circle, berserta lima tahapannya.

@keyframes square-to-circle {   0%{}   25%{}   50%{}   75%{}   100%{} }

Kita perlu menentukan styles untuk masing-masing tahapan di atas, jadi mari kita mulai dengan menentukan besaran border-radius untuk masing ujung kotak.

@-webkit-keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;   }   25%  {     border-radius:50% 0 0 0;   }   50%  {     border-radius:50% 50% 0 0;   }   75%  {     border-radius:50% 50% 50% 0;   }   100% {     border-radius:50%;   } }

Sebagai tambahan, kita akan memberikan sebuah background-color berbeda di masing-masing tahapan.

@keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;   }   100% {      border-radius:50%;     background:darksalmon;   } }

Untuk membuatnya lebih menarik, selain border-radius dan background-color, kita juga akan merotasi div.

@keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;     transform:rotate(0deg);   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;     transform:rotate(45deg);   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;     transform:rotate(90deg);   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;     transform:rotate(135deg);   }   100% {      border-radius:50%;     background:darksalmon;     transform:rotate(180deg);   } }

Menerapkan Animasi

Setalah kita mendefinisikan animasi square-to-circle, kita akan menerapkannya ke dalam div:

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s 1s infinite alternate;  }

Di sini anda melihat kita telah menambahkan porperti animation shorthand, yang menyatakan:

• animation-name adalah square-to-circle.
• animation-duration adalah 2s.
• animation-delay adalah 1s.
• animation-iteration-count adalah infinite, jadi animasinya akan berjalan seterusnya tanpa batas.
• Dan animation-direction adalah alternate, jadi animasinya akan berjalan dari awal hingga akhir, kemudian kembali ke awal lagi, dan lagi hingga akhir, dan seterusnya.

Menggunakan Timing-Function

Satu nilai terakhir yang dapat kita tambahkan pada properti animation adalah animation-timing-function. 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 square-to-circle animation, using a cubic-bezier function.
Saya ingin menambahkan sebuah efek elastis untuk animasi square-to-circle 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.

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  }

Kode akhir, tanpa tambahan awalan vendor ( -webkit- , -moz-, -ms-, -o- ) adalah sebagai berikut:

div {   width: 200px;   height: 200px;   background-color: coral;   animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; }   @keyframes square-to-circle {   0%  {     border-radius:0 0 0 0;     background:coral;     transform:rotate(0deg);   }   25%  {     border-radius:50% 0 0 0;     background:darksalmon;     transform:rotate(45deg);   }   50%  {     border-radius:50% 50% 0 0;     background:indianred;     transform:rotate(90deg);   }   75%  {     border-radius:50% 50% 50% 0;     background:lightcoral;     transform:rotate(135deg);   }   100% {      border-radius:50%;     background:darksalmon;     transform:rotate(180deg);   } }

Satu Hal Terakhir

Semuanya 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!

outline: 1px solid transparent;

Simpulan

Kita telah menggunakan animasi CSS untuk membuat sebuah contoh sederhana, animasi berulang