Membuat Animasi Menggunakan CSS3 Transition dan Transform

Sejak diluncurkannya CSS versi 3 ada banyak kemudahan yang didapat oleh para web designer, salah satunya adalah kemudahan dalam membuat animasi di web. Jika sebelumnya kita membuat animasi di web menggunakan javascript, tapi sekarang bisa menggunakan CSS3. Property CSS 3 yang berguna dalam membuat animasi adalah transition dan transfrom.
Properti Transition berguna untuk mengatur waktu perubahan dari satu bentuk ke bentuk lain. Properti transfrom berguna untuk mengubah bentuk suatu objek. Sekarang kita perhatikan contoh animasi sederhana berikut:

Kode CSS3 dan HTML

Berikut adalah kode untuk animasi sederhana di atas:

<style>
#kotak{
    width:300;
    height:70;
    border:black 3px solid;
    background-color:lightyellow;
    font-size:15pt;
    -moz-transition: all 0.7s ease-in-out;
}
#kotak:hover{
    background-color:blue;
    font-size:30pt;
}
</style>
<div id="kotak">
<center>
Menu Website
</center>
</div>

1. Yang perlu diperhatikan dari kode di atas adalah -moz-transition: all 0.7s ease-in-out; , ini merupakan kode CSS3 yang menyatakan kita menerapkan transition pada DIV kotak.
   all, artinya diterapkan untuk semua poperty.
   0.7s, artinya waktu transisi ke bentuk yang lain adalah 0.7 detik.
   ease-in-out, artinya kecepatan transisi lambat di awal dan di akhir. Ada berbagai macam variasi kecepatan transisi, yaitu: linier, ease, ease-in, ease-out.
    
2. :hover, kode hover berarti jika objek HTML diletakkan kursor mouse diatasnya, pada contoh di atas, jika kursor mouse diletakkan di atas onjek DIV kotak, maka kita ubah properti background-color menjadi biru dan ukuran font menjadi 30pt.

Transform CSS3

Pada CSS3 menyediakan property transform, yaitu suatu properti yang berfungsi mengubah suatu objek, baik mengubah skala pembesaran ataupun mengubah rotasi objek. Pada contoh berikut kita akan mengubah skala pembesaran suatu objek.

Kode CSS dan HTML animasi di atas adalah:

<style>
.kotak{
    width:300;
    height:100;
    overflow:hidden;
    border:black 3px solid;
}
img{
    -moz-transition: all 1s ease-in;
}

img:hover{
    -moz-transform: scale(5);
}
</style>
<div class="kotak">
<img src="1.jpg">
</div>

Pada kode di atas jika objek IMG kita hover, maka kita lakukan tranform skala pembesaran, yaitu menjadi 5 kali lebih besar. Kodenya  -moz-transform: scale(5);

Contoh-contoh di atas menggunakan browser Firefox 4+, Jika untuk IE9, Safari dan lainnya menggunakan kode berikut:

img:hover{
 -ms-transform: scale(5); /* IE 9 */
 -moz-transform: scale(5); /* Firefox */
 -webkit-transform: scale(5); /* Safari and Chrome */
 -o-transform: scale(5); /* Opera */
}