Efek Transition CSS

• 22.56
• 0 komentar
• Caesazard™

    Sebagai Posting Awal Di Blog Ini Saya Akan Menjelaskan Teknik Dasar Pada Transition Ini Adalah Sebagai Awal Post Di Blog Ini :D, Yah Post Yang Mudah Mudah Saja Dulu, Sebelumnya Transition Sudah Dijelaskan Di http://www.w3schools.com Dan Sekarang Saya Jelaskan Kembali Di Blog Saya Ini Sebelumnya Saya Juga Mempunyai Blog Yaitu http://www.caesazard.com/ Blog Ini Adalah Untuk Blog Cadangan Blog Saya :D Dan Penjelasan Transition Langsung Dibawah Ini :

CSS TRANSITION 

Dengan CSS3 kita bisa mengunakan berbagai efek dengan satu style ke style lain tanpa harus ada pengunakan efek animasi dengan javascript atau flash.
hanya dengan mengarahkan mouse maka efek tersebut akan bekerja.perlu di ingatkan kembali. CSS3 Hanya akan bekerja pada Browser yang mendukung. seperti Firefox,Google Chrome,Safari dan Opera, namun Untuk IE masih belum ada dukungan,semoga browser tersebut bisa menyaingi browser lainnya.
contoh penggunaan pada browser :

• Firefox  membutuhkan awalan -moz-.
• Chrome dan Safari membutuhkan awalan -webkit-.
• Opera membutuhkan awalan -o-.

CONTOH :








CSS :

.netxp{width:60px;height:40px;background:#92B901;color:#ffffff;position:absolute;font-weight:bold;font-size:15px;padding:10px;float:left;margin:5px;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity;-o-transition-duration:1s,1s,1s,1s,1s,1s;-moz-transition-property:width,height,-o-transform,background,font-size,opacity;-moz-transition-duration:1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity;transition-duration:1s,1s,1s,1s,1s,1s;border-radius:5px;opacity:0.4}
.netxp:hover{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);opacity:1;background:#1ec7e6;width:90px;height:60px;font-size:30px}

HTML :

<div class="netxp">Text</div>

Demikian Tutorialnya Terimakasih ^_^