Animasi Loading Blog Dengan CSS Keyframes

Hay sobat DS-Blog , pa kabar semunaya nih hehe., semoga sobat DS-Blog baek aja ya...
udah lama DS-Blog tidak ngepost, dan kali ini saya akan post yng berjudul "Animasi Loading Blog Dengan CSS Keyframes" ini macam"nya ada 3 yaitu, Bounce and Rotate Effect, Earthquake Effect, Sliding . nah pada penasaran kan ?
oke lah langsung saja ke pembahasannya :) ...

A. Animation 1 (Bounce and Rotate efek) :

Anda bisa lihat contohnya di sini
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-webkit-keyframes WAKloading{
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s

4.Sehingga nantinya jadi seperti ini :

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

5. Save Template!

B. Animation 2 (Earthquake Effect) :

Bisa dilihat contohnya di sini
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-o-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-moz-keyframes WAKloading{
0%{opacity:1;-moz-transform:rotate(0deg);}
5%{opacity:1;-moz-transform:rotate(5deg);}
10%{opacity:1;-moz-transform:rotate(-5deg);}
15%{opacity:1;-moz-transform:rotate(5deg);}
20%{opacity:1;-moz-transform:rotate(-5deg);}
25%{opacity:1;-moz-transform:rotate(5deg);}
30%{opacity:1;-moz-transform:rotate(-5deg);}
35%{opacity:1;-moz-transform:rotate(-5deg);}
40%{opacity:1;-moz-transform:rotate(5deg);}
45%{opacity:1;-moz-transform:rotate(-5deg);}
50%{opacity:1;-moz-transform:rotate(5deg);}
55%{opacity:1;-moz-transform:rotate(-5deg);}
60%{opacity:1;-moz-transform:rotate(5deg);}
65%{opacity:1;-moz-transform:rotate(-5deg);}
70%{opacity:1;-moz-transform:rotate(5deg);}
80%{opacity:1;-moz-transform:rotate(-5deg);}
85%{opacity:1;-moz-transform:rotate(5deg);}
90%{opacity:1;-moz-transform:rotate(-5deg);}
95%{opacity:1;-moz-transform:rotate(5deg);}
35%{opacity:1;-moz-transform:rotate(0deg);}
}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

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

4. Sehingga hasilnya nati jadi seperti ini :

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

5. Save Template

C. Animation3 ( Sliding Effect ) :

Bisa anda lihat di sini
Untuk Menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-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;}}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

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

4. Sehingga menjadi seperti ini :

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

5. Save Template !

nah gimana sobat DS-Blog, caranya mudah kan, oke sampai sini saja, semoga artikel ini bermanfaat untuk sahabat DS-Blog..
dan jangan lupa comment jika artikel diatas sangat bermanfaat untuk sahabat DS-Blog , Terimah kasih :)
Source : Chaone Blog

Backlinks Please Thanks

URL

Code For Forum

HTML Code

<a href='http://dedisinaga123.blogspot.com/2013/01/animasi-loading-blog-dengan-css.html' target='_blank'>Animasi Loading Blog Dengan CSS Keyframes</a>

Anda Sekarang Sedang Baca Artikel Tentang Animasi Loading Blog Dengan CSS Keyframes , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Animasi Loading Blog Dengan CSS Keyframes ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Animasi Loading Blog Dengan CSS Keyframes Sumbernya. Thank's

Animasi Loading Blog Dengan CSS Keyframes

Posting Komentar - Back to Content

Label

Postingan Populer

Anda Pengujung Ke