- Back to Home »
- Blogger Trick »
- Efek CSS3 Transition
Posted by : Unknown
26 Des 2011
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;
}
-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;
}
-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;
}
-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;
}
-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;
}
-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
Terimakasih telah membaca artikel ini jika anda tertarik, anda bisa copas artikel ini dengan menyertakan sumbernya.