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
the-anarchyta.blogspot.com
Berkomentarlah dengan sopan.
Berkomentarlah sesuai topik yang dibahas #ThinkHIGH! ^_^ ConversionConversion EmoticonEmoticon