Popular Post

Cara Membuat Animasi Loading Blog dengan CSS

Posted by : Boyz Selasa, 23 April 2013

Hai kawan-kawan kali ini saya akan share trick sederhana untuk loading blog dengan animasi. Trik ini dibuat dengan CSS3 Animation! Dan sudah saya siapkan beberapa animasinya agar sobat bisa memilih sendiri animasinya! Okeh langsung aja yok ke TKP!
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

Sumber 

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Date A Live

About Me

Foto Saya
Perkenalkan. Nama saya adalah Mashudi Irawan. Nama cyber saya adalah Boyz. Saya tinggal di Tuban (Kota Tercinta), Jawa Timur, Indonesia. Lebih tepatnya saya tinggal di desa terpencil (hehehe). Namun saya nggak gaptek (apa itu?). Saya sekolah di SMAN 1 Plumpang. Kelas XII IPA 1 (nungguin kelulusan). Saya sedikit jahil sama teman-temanku (troll). Tapi saya tidak bego' (herp). Namun saya paling greget (!!!). Saya tidak menyukai CJr dan JB (karena mereka maho (haaahhhh)) Saya menyukai anime, baca manga. Band favoritku adalah A7X dan Linkin Park. Udah segitu aja. Bingung mau jelasin lagi. :)

Total Pageviews

Diberdayakan oleh Blogger.

- Copyright © 2013 Welcome! - Date A Live - Powered by Blogger - Designed by Johanes Djogan -