CSS Trick : Membuat Efek Transisi dengan CSS

Membuat efek transisi bisa dilakukan dengan menggunakan CSS, tanpa harus menggunakan javascript ataupun library jQuery. Cara sederhana yang dapat dilakukan adalah dengan menggunakan kode “transition”. Contoh penggunaan efek transisi dapat dilihat pada Tombol dan Kotakhijau berikut ini.

Semua transisi di atas hanya bisa berjalan di browser Safari, Firefox, Opera dan Chrome, dan tidak akan bisa digunakan di Internet Explorer. Berikut ini source code dari efek-efek transisi di atas.

[code lang=”html”]
<style type="text/css">
.tautan { margin-bottom:14px;}
.tautan a {
padding: 10px; background-color:#CCC; color:#666;
}
.tautan a:hover {
background-color:#666; color:#FFF;
-moz-transition: background 0.25s ease-in-out; /*-moz untuk firefox 4*/
-o-transition : background 0.25s ease-in-out; /*-o untuk opera*/
-webkit-transition: background 0.25s ease-in-out; /*-webkit untuk chrome dan safari*/
transition: background 0.25s ease-in-out;
}
.kotakhijau {
width:100px;
height:100px;
padding:3px;
text-align:center;
color:white;
background:green;
transition:width 5s, height 5s;
-moz-transition:width 5s, height 5s, -moz-transform 2s;
-webkit-transition:width 5s, height 5s, -webkit-transform 2s;
-o-transition:width 5s, height 5s, -o-transform 2s;
}
.kotakhijau:hover {
width:200px;
height:200px;
padding 10px;
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
}
</style>
<div class="tautan"> <a href="#">TOMBOL</a> </div>
<div class="kotakhijau">Animasi Kotak Hijau</div>
[/code]

Gampang bukan, tanpa menggunakan script javascript kita bisa mengembangkan animasi dan transisi objek dengan hanya menggunakan CSS.
Sumber : http://www.w3schools.com/css3/css3_transitions.asp
Isaninside – Yogyakarta November 2011