Belajar Membuat Animasi Menggunakan CSS3 Transition dan Transform

Posted on Updated on


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:

 

Menu Website

 

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>
id="kotak"> Menu Website
  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>
class="kotak"> src="1.jpg">

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 */
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s