Cara Membuat Efek Loading Dengan Animasi Keyframes

Keyframe | Pada kesempatan kali ini saya akan membagikan tutorial cara membuat animasi loading pada blog. 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.

Animation Bounce and Rotate

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

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

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

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

Langkah 4 : Save Template

Animation Earthquake Effect

Langkah 1 : Cari kode ]]></b:skin
Langkah 2 : Simpan kode diatas ]]></b:skin>

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

Langkah 3 : Sisipkan kode animation : Earthquake 3s ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

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

Langkah 4 : Save Template

Animation Sliding Effect

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

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

Langkah 3 : Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

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

Langkah 4 : Save Template

Source: the-anarchyta.blogspot.com