Mengenal Animasi Transisi dengan CSS3

CSS3 dapat mendeteksi perubahan properti CSS pada suatu DOM (Document Object Model). Perubahan ini kemudian dapat diberikan secara bertahap, sehingga memberikan kesan animasi.

Misalnya, saya memiliki struktur html sebagai berikut

1
2
3
4
5
6
7

<button id='set-quarter' onclick='setCssClass("seperempat");'>25%</button>
<button id='set-half' onclick='setCssClass("setengah");'>50%</button>
<button id='set-full' onclick='setCssClass("full");'>100%</button>
<br/>&nbsp;
<div id='sample-container'>
    <div id='sample1' class='seperempat'></div>
</div>

Dengan CSS berikut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#sample-container {
    position: relative;
    width: 300px;
    background: blue;
    height: 25px;
}
 
#sample1 {
    background-color: red;
    position: absolute;
    height: 25px;
    transition: width 1s;
}
 
.seperempat {
    width: 25%;
}
 
.setengah {
    width: 50%;
}
 
.full {
    width: 100%;
}

Perhatikan pada CSS, baris transition: width 1s;, singkatnya, saya menyatakan bahwa element dengan id sample1 apabila property width nya berubah, maka akan menggunakan transisi menuju nilai baru dalam waktu 1 detik, akan memberikan kesan animasi pergerakan ketika width atau lebar element tersebut berubah.

Nah, untuk mendemonstrasikan perubahan properti width tersebut, di kode html diatas telah terdapat 3 buah tombol, yang masing masing telah memiliki onclick handler. Sederhana saja, ketika di klik, masing masing tombol tersebut akan memberikan class CSS pada element dengan ID sample1 menjadi seperempat, setengah, atau full.

Definisi masing masing class tersebut dapat dilihat pada kode CSS diatas, class ini hanya merubah properti width saja.

Ketika suatu elemen HTML diubah class CSS atau bahkan styling CSS nya, maka browser akan otomatis melakukan rendering atau menggambar ulang. Dan karena CSS tadi sudah menyatakan apabila terjadi perubahan width maka perubahan tersebut akan dilakukan dalam waktu 1 detik, dengan efek animasi.

Hasil lengkapnya bisa dilihat sebagai berikut

Tentu saja, kode yang saya tuliskan ini adalah bentuk sederhana dan versi-sakit-kepala dari animasi. Banyak sekali library siap pakai animasi yang menggunakan CSS3 ini, namun tujuan saya bukanlah memberikan efek animasi yang bagus atau kemudahan siap pakai, tetapi agar kita dapat lebih mengerti bagaimana menggunakan properti CSS3, transition.