Cara Membuat Efek Loading Dengan Animasi Keyframes

Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun. Langsung saja gak usah panjang lebar..

Animation Bounce and Rotate

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes BounceRate{
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;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

4. Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : BounceRate 3s; }

5. Save Template

Animation Earthquake Effect

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

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

4. Sisipkan kode animation:Earthquake 3s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : Earthquake 3s; }

5. Save Template

Animation Sliding Effect

1. Login ke BLogger.com
2. Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

4. Sisipkan kode animation:Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

#post-wrapper { animation : Sliding 2s; }

5. Save Template

Sekian dari saya, semoga artikel ini bermanfaat buat Anda dan dapat menarik pengunjung blog anda..