Iyunk blog: Loading Blog dengan @KeyFrame [dari kiri ke kanan]

Loading Blog dengan @KeyFrame [dari kiri ke kanan]

Kali ini saya akan share tutorial membuat loading blog dengan @KeyFrame. tehnik ini lah yansaya terapkan di blog ini, contohnya adalah pada menu navigasi dan sidebar blog ini hampir sama seperti itu tutorial yang saya share kali ini.

Dari Kiri Ke Kanan

Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}} @-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}} @-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}} @keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}to{transform:translate(0px,0px);opacity:1}}

Letakkan kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
hehehe agak ribetya tulisanya gini contohnya: misalnya saya mau terapkan trik ini di bagian navigasi jadi taruh kode tadi di CSS bagian navigasi

CONTOH:
#navigiasi{
-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
}

kali ini baru satu trik yang saya bagi tentang loading blog trik yang ke dua akan saya share di posting selanjutnya jadi tunggu posting selanjutnya :D