Mempercantik Load Blog Dengan @KeyFrame

Mempercantik Load Blog Dengan @KeyFrame - Yang akan saya bahas kali ini masih mengenai design blog, Yaitu bagaimana cara memberikan efek load/muat pada blog, loader blog yang satu ini menggunakan @KeyFrame. @KeyFrame hanya dapat support dengan web browser tertentu, seperti Firefox, Opera, Google Chrome, dll.

• Demo

Cara membuat-nya sangat mudah dan simple cukup tambahan kode css3 dibawah ini diatas kode :

]]></b:skin>.

@-webkit-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-moz-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-ms-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-o-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@keyframes myfirst {0%{opacity:0}100%{opacity:1}}

Dan tambahkan kode ini pada instrumen yang akan diberi efek loader.

animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;

Contoh : #content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;background:#fff}

Catatan : #content-wrapper adalah nama instrumen.

Tweet