Animasi Loading Dengan CSS Keyframes

Posted by : Unknown 22 Feb 2013

Halo sobat seven fold kali ini admin akan share animasi loading dengan css keyframes seperti blog ini. pasti sobat pada tertarikkan langsung aja ya, cekitsob

1. Masukkan code css dibawah ini di atas ]]></b:skin>

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

2. Masukkan code html dibawah ini yang mau dipasang keyframes

animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;

Contoh :

#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}

Yah itulah tutorial animasi loading dengan css keyframes
Tunggu posting berikutnya ya!!! Jangan lupa follow http://defa-technology.blogspot.com/

Sumber

{ 5 komentar... read them below or Comment }

DShare 3322 February 2013 at 22:37
Terima kasih infonya admin..
ReplyDelete
Replies
Dyns-Cyber7 March 2013 at 20:49
keren ni, jadi pengen nyoba..
comment back ya. thanks
ReplyDelete
Replies
Unknown15 March 2013 at 01:59
permisi, saya blogger newbie. saya mau tanya bagaimana cara membuat menu laman memiliki bar-bar baru setelah didekatkan kursor (seperti laman di blog ini). mohon bantuannya :)
terima kasih
ReplyDelete
Replies

Add comment

Rule In This Blog :

- Don't Spam
- Don't Flood
- Boleh Copas Tetapi Sertakan Credit
- Komentar Dengan Bahasa Yang Bagus

Blog Ini Sudah Saya Setting Jadi Blog Dofollow