Efek CSS3 Transition - Dengan CSS3 Transition , kita dapat menambahkan efek ketika mengubah objek dari satu gaya ke yang lain, tanpa menggunakan animasi Flash atau javascripts.

Tanpa Transitions

Pakai Transitions

Untuk membuat efek transition sobat harus menentukan :

• Property ( All , Background , Color , Weight , Height , Outline )
• Duration / Durasi ( Second , Millisecond )
• Function / Fungsi ( Ease , Linear , Ease-In , Ease-Out , Ease-In-Out )

#Demo1{
-webkit-transition: weight 2s ease;
-moz-transition: weight 2s ease;
-o-transition: weight 2s ease;
transition: weight 2s ease;
}

Demo1

#Demo2{

-webkit-transition: background 2s linear;

-moz-transition: background 2s linear;

-o-transition: background 2s linear;

transition: background 2s linear;

}

Demo2

Demo3{
-webkit-transition: color 2s ease-in;
-moz-transition: color 2s ease-in;
-o-transition: color 2s ease-in;
transition: color 2s ease-in;
}

Demo3

Demo4{
-webkit-transition: height 2s ease-out;
-moz-transition: height 2s ease-out;
-o-transition: height 2s ease-out;
transition: height 2s ease-out;
}

Demo4

Demo5{
-webkit-transition: outline 2s ease-in-out;
-moz-transition: outline 2s ease-in-out;
-o-transition: outline 2s ease-in-out;
transition: outline 2s ease-in-out;
}

Demo5

Silahkan berkreasi sesukanya asalkan tata letaknya tetap benar Property → Duration → Function . Cara meletakkannya seperti ini :

Demoku {
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
background:orange;
color:gray;
width:100px;
}
/* beri efek hover */
Demoku:hover {
background:grey;
color:black;
width:200px;
}

Hasilnya

Demoku

Web Support :

• Mozilla Firefox 4.0+ ( harus menggunakan awalan -moz- )
• Chrome 3.0+ ( harus menggunakan awalan -webkit- )
• Safari 3.2+ ( harus menggunakan awalan -webkit- )
• Opera Mini 10.5+ ( harus menggunakan awalan -o- )

Referensi :

• http://www.w3schools.com/css3/css3_transitions.asp