CSS3, Sonic Mengejar Bola

Dulu sebelum ada CSS3 untuk membuat efek animasi biasanya memerlukan bantuan javascript. Sekarang dengan teknik dan fitur yang ada di CSS3 dan dengan bantuan browser atau peramban yang sudah mendukung WebKit seperti Google Chrome/Safari kita bisa membuat efek animasi baik pada teks, gambar atau video seperti kalau kita menggunakan Power Point, bahkan dengan CSS3 kita juga bisa membuat film kartun atau games.

Mempelajari CSS3 ternyata sangat-sangat mengasikkan, terutama efek animasinya. Namun sayang, belum semua browser atau peramban bisa menampilkan efek-efek animasi tersebut. secara penuh kecuali Google Chrome/Safari terbaru. Untuk Firefox 4 beta dan Opera 10.62 hanya bisa menampilkan beberapa efek animasi saja, (*ngedumel sendiri*) kapan sich semua peramban bisa kompak  dan standard.

Pada kesempatan ini, sedikit berbagi dari hasil mempelajari CSS3 dan sedikit utak-atik, di bawah ini saya tampilkan tips dan triks CSS3 yaitu Sonic mengejar bola.

Demo Sonic Mengejar Bola, silahkan dibuka dengan Google Chrome/Safari terbaru

Arahkan mouse ke dalam box (Hover)

Kode CSS-nya :

<style>
#timings_bola {
background:#7DB440 url(http://domainanda.com/img/rumput.png);
-webkit-box-shadow: 5px 5px 5px #818181;
-moz-box-shadow: 5px 5px 5px #818181;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
width:580px;
height:306px;
margin:0 auto;
border:1px #006600;
padding:5px;
}
.bola_1 {
margin-top:200px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_1 {
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
}
.bola_2 {
margin-top:-110px;
width:100px;
height:100px;
margin-bottom:10px;
}
#gelinding.bola_2 {
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
-webkit-transition: all 3s linear;
transition: all 3s linear;
}
.sonic_1 {margin-top:-70px;margin-left:20px;
width:54px;
height:62px;}
#lari.sonic_1 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
.sonic_2 {
margin-top:-70px;
margin-left:50px;
width:54px;
height:62px;
}
#lari.sonic_2 {
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 5s linear;
}
#timings_bola:hover .bola_1, #timings_bola.hover_effect .bola_1 {
margin-left:480px;
-webkit-transform: translate(540px,-500px);
-moz-transform: translate(540px,-500px);
-o-transform: translate(540px,-500px);
}
#timings_bola:hover .bola_2, #timings_bola.hover_effect .bola_2 {
margin-left:480px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#timings_bola:hover .sonic_1, #timings_bola.hover_effect .sonic_1 {
-webkit-transform: translate(940px,-400px);
-moz-transform: translate(940px,-400px);
-o-transform: translate(940px,-400px);}
#timings_bola:hover .sonic_2, #timings_bola.hover_effect .sonic_2 {
margin-left:470px;
margin-left:530px;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
transform: translate(0,0);
}
</style>

Kode HTML-nya :

<h2 align="center">Demo Sonic Mengejar Bola, by Alwi</h2>

<div id="timings_bola">
<div id="gelinding" class="bola_1"><img src="http://domainanda.com/img/bola.png"></div>
<div id="gelinding" class="bola_2"><img src="http://domainanda.com/img/bola.png"></div>
<div id="lari" class="sonic_1"><img src="http://domainanda.com/img/sonic.gif"></div>
<div id="lari" class="sonic_2"><img src="http://domainanda.com/img/sonic.gif"></div>
</div>
<p style="text-align: center; margin-top: 10px;"><strong> Arahkan mouse ke dalam box (Hover)</strong></p>

Keterangan : Ganti yang saya beri warna biru dengan URL gambar anda.

Animasi lainnya akan saya tampilkan di postingan berikutnya, seperti Zoom In Zoom Out, Rotation, Transitions, Cross fading images, Sliding, Flipping dan lain-lain.  Ok !, Selamat berkreasi dan mengeksplorasi kelebihan-kelebihan CSS3.

http://domainanda.com/img/