Animasi Loading Blog Dengan CSS Keyframes

Animasi loading adalah suatu fitur dimana akan menampilkan efek loading ketika mengunjungi blog atau perpindahan halaman dengan gambar atau animasi.

1. Animation 1 (Bounce and Rotate Effect)
Kalian bisa lihat demo nya di sini: http://skynet-fordeon.blogspot.com

Untuk menggunakannya, ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:

@-webkit-keyframes WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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;}
}

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:

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

6. Sehingga nantinya jadi seperti ini:

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

7. Setelah selesai, silakan simpan template kalian.

B. Animation 2 (Earthquake Effect)
Kalian bisa lihat demo nya di sini: http://simple-ware.blogspot.com

Untuk menggunakannya silakan ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:

@keyframes WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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);}
}

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:

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

6. Sehingga hasilnya nati jadi seperti ini :

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

7. Setelah selesai, silakan simpan template kalian.

C. Animation 3 (Sliding Effect)
Untuk demo nya bisa kalian lihat di sini: http://dodgerhack.blogspot.com

Untuk menggunakannya silakan ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:

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

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:

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

6. Sehingga kode nya menjadi seperti ini:

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

7. Setelah selesai, silakan simpan template kalian.

Sekian artikel saya kali ini mengenai cara memasang animasi loading blog dengan css keyframes, semoga bermanfaat. Terima kasih sudah berkunjung dan sampai jumpa di artikel saya selanjutnya.