Beberapa tahun lalu, jika ingin membuat sebuah animasi sederhana di website, seperti objek bergerak dari kiri ke kanan, maka kita harus membuatnya menggunakan Flash, yang dibuat frame-by-frame. Agak ribet ya.
Namun saat ini semua sudah lebih simple, kita bisa membuat animasi dengan CSS3.
Bagimana membuat nya? Pada tulisan ini wakaka mencontohkan animasi sederhana yang bisa kita buat menggunakan CSS, tentunya ini hanya dasar-dasar, anda bisa membuat yang lebih wah dari ini nantinya. Ingat ini hanya basic untuk pemula.
Membuat Struktur HTML
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> <!-- Code CSS diletakan disini --> </style> </head> <body> <div class="box"> <div class="ball"></div> </div> </body> </html>
Code CSS
CSS ini diletakkan diantara tag <pre><style> dan </style></pre>
.box{
margin:30px auto;
background:#fff000;
width:400px;
height:200px;
position:relative;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
}
.ball{
width:50px;
height:50px;
position:absolute;
background-color:#b00;
margin:0;
padding:0;
bottom:0;
display:block;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-moz-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
-webkit-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
}
.box:hover .ball{
border-radius:0;
-webkit-border-radius:0;
border-radius:0;
width:100px;
height:100px;
transform: translate(300px,0);
-moz-transform: translate(300px,0);
-webkit-transform: translate(300px,0);
}
Oke, hanya sesederhana itu? YA, hasil yang kita dapat adalah seperti demo dibawah ini
DEMO
Penjelasan:
Yang perlu kamu perhatikan hanya pada bagian
-moz-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s; -webkit-transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s; transition:width 2s, height 1s, -moz-transform 2s, -moz-border-radius 1s;
Disitu kita menentukan, apabila mouse berada diatas kotak warna kuning, maka akan terjadi transisi, yang durasinya width:2 detik, height 2 detik, -moz-transform 2 detik, dan -moz-border-radius 1 detik.
Transisi seperti apa yang akan terjadi?
Semua ditentukan dibagian box:hover
-moz-border-radius:0; width:100px; height:100px; -moz-transform: translate(300px,0);
Yaitu:
Border radius yang tadinya 50% (berbentuk bulat) akan berubah menjadi 0 (bentuk kotak).
Width & Height yang tadinya 50px akan berubah menjadi 100px, dalam waktu 2 detik.
Posisi akan di transformasi sesuai sumbu x menjadi 300px.
Baiklah Sekian tulisan kali ini, selamat berkreasi sahabat Wakaka Design :D
contoh lainnya http://m-alwi.com/menggulingkan-top-komentator.html