Mempelajari Animasi CSS3

Membuat sebuah animasi pada dasarnya adalah bukan hal yang mudah, karena kita membutuhkan skill khusus dan kreativitas dalam membuatnya. Untuk membuat animasi kita harus memiliki software yang dibutuhkan untuk membuat animasi yang kita inginkan seperti: Animate, Blender, dll. Namun, jika kita melihat kebelakang banyak sekali website-website yang menggunakan konsep animasi hanya saja mereka menggunakan software seperti Adobe Flash untuk membuat animasi, lalu memasangnya di website dengan mengembed file animasi dengan ekstensi *.swf.

Tapi, sekarang ini kita tidak harus menggunakan software tersebut untuk membuat sebuah animasi pada website yang kita buat. Karena baru-baru ini sudah banyak library untuk mempermudah kita dalam membuat sebuah animasi 2d ataupun 3d dan itu dibuat dengan CSS3 atau JavaScript.

Kali ini saya akan membahas tentang membuat animasi dengan CSS3. Apa pentingnya, kan kita bisa pakai library seperti animate.css? Benar, kita dapat menggunakan library seperti animate.css ataupun yang lainnya. Namun, dengan kita mempelajari membuat animasi sendiri, kita akan tahu bagaimana caranya membuat animasi dan tahu bagaimana library-library tersebut bekerja.

Here we go!

Pertama, kamu harus membuat struktur HTML terlebih dahulu. Pada tutorial ini kita akan membuat 2 class animasi pada CSS3 yaitu fade In dan fade Out.

<!DOCTYPE html>
<html>
<head>
<title>Mempelajari Animasi CSS3</title>
</head>

<body>
<div class="fadein">
Hello, i'm fadein!
</div>
<div class="fadout">
Hello, i'm fadeout!
</div>
</body>
</html>

Kita bisa lihat pada code diatas, terdapat 2 element div masing memiliki class fadein dan class fadeout.

Kemudian kita perlu membuat 2 selector pada CSS.

.fadein, .fadeout { /* selector untuk 2 class sekaligus */
font-size: 20px;
}

Pada kode diatas kita baru saja membuat selector untuk 2 element sekaligus dan memberi properti ukuran huruf sebesar 20px. Selanjutnya kita akan membuat keyframes. Apa itu keyframes? keyframes adalah suatu alur animasi pada CSS3 untuk merubah 1 style ke style yang lain.

Pada dasarnya cara penulisan keyframes seperti ini.

@keyframes namaAnimasi {
from {
/* do something here */
}
to {
/* do something here */
}
}

atau bisa juga seperti ini.

@keyframes namaAnimasi {
0% {
/* do something here */
}
100% {
/* do something here */
}
}

Point penting terdapat pada keyframes-selector. Dimana keyframes-selector from sama seperti 0% dan to sama seperti 100% yang intinya adalah semua properti CSS yang terdapat didalam from{} akan di eksekusi di awal dan to{} akan dieksekusi diakhir.

Contoh animasi mengganti background

Untuk membuat sebuah keyframes untuk class fadein itu hal yang mudah. Buat satu buah keyframes seperti ini.

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

Penjelasan dari kode diatas adalah keyframes bernama fadein akan menghilangkan element karena memberi properti opacity:0; pada keyframes-selector 0%{} lalu elemen akan dimunculkan secara perlahan hingga properti opacity bernilai 1 pada keyframes-selector 100%{}.

Ini belum selesai, kita masih perlu menghubungkan antara selector yang kita buat tadi yaitu fadein dengan keyframes. Bagaimana caranya? Kita hanya perlu menambahkan properti ‘animation-name’ yaitu nama keyframes yang akan digunakan sebagai alur animasi dan ‘animation-duration’ sebagai durasi lamanya animasi berjalan (dalam hitungan detik).

.fadein {
animation-name: fadein; /* nama keyframes */
animation-duration: 1s; /* durasi animasi */
}

Sehingga kesuluran kode CSS nya akan nampak seperti ini.

.fadein, .fadeout {
font-size: 20px;
}
.fadein {
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Animasi Fade In

Sampai sini kita sudah membuat 1 buah animasi dengan efek fade In. Lalu berikutnya kita akan membuat efek animasi fade Out. Sama seperti fade In hanya saja pada animasi fade Out kebalikannya dari animasi fade In, yang artinya elemen akan muncul lalu perlahan meredup.

Kita perlu membuat 1 buah keyframes lagi untuk animasi fade Out. Sama seperti fade In kita hanya perlu membalik properti opacity: 0; diletakkan didalam 100%{} dan opacity: 1; diletakkan didalam 0%{}.

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

Lalu buat selector untuk class fadeout, sama seperti fade in kita hanya perlu mengubah nilai properti ‘animaion-name’ menjadi fadeout karena kita menggunakan keyframes bernama fadeout sebagai alur animasinya dan menambahkan properti opacity: 1; agar proses animasi menjadi halus.

.fadeout {
animation-name: fadeout;
animation-duration: 1s;
opacity: 1;
}

Maka keseluruhan kode akan terlihat seperti ini.

.fadein, .fadeout {
font-size: 20px;
}
.fadein {
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeout {
animation-name: fadeout;
animation-duration: 1s;
opacity: 1;
}
Animasi fade out akan kembali ke posisi awal

Animasi fade Out berhasil tapi kembali ke posisi awal? Tenang, ini karena kita belum menambahkan properti animation-fill-mode: forwards; properti ini berfungsi untuk menghentikan animasi ketika setelah animasi berhenti (animasi selesai atau animasi tertunda).

.fadeout {
animation-name: fadeout;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 1;
}

Maka keseluruhan kode akan tampak seperti ini.

.fadein, .fadeout {
font-size: 20px;
}
.fadein {
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeout {
animation-name: fadeout;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 1;
}

Setelah menambahkan properti tersebut animasi seharusnya sudah berjalan dengan semestinya.

Animasi Fade Out

Saya sudah membuat demonya di JSFiddle.

Untuk info lengkap dan informasi Browser Support silahkan kunjungi situs berikut.

Final Words

Pada tutorial ini kita sudah dapat memepelajari tentang CSS3 Animation dan keyframes. Kamu dapat membuat berbagai animasi lainnya dengan menggunakan cara yang sama. Semoga tutorial ini bermanfaat dan sampai jumpa ditutorial berikutnya.