Membuat efek Loading di blog Earthquake Keyframe
Animation Earthquake Effect. Baiklah sobat masih seputar membuat efek loading blog menggunakan @keyframe sebagai lanjutan dari artikel sebelumnya yaitu cara membuat efek bounce and rotate dengan keyframe.Dan untuk kali ini adalah membuat efek Earthquake saat loading atau saat memuat halaman blog anda.

Sebenarnya juga sih tidak terlalu cocok di katakan Earthquake effect mungkin lebih cocoknya "Shake Effect" atau apasajalah yang mungkin lebih cocok. Untuk efek keyframe lain jika tertari baca : membuat efek loading dengan keyframe di blog.

Anda dapat menerapkan efek ini di loading blog anda. Efek ini hanya menggunakan CSS dan tidak menggunakan javascript jadi tidak akan mempengaruhi loading blog begitu besar. Cuma sayangnya efek ini tidak terlihat untuk beberapa browser versi jadul ataupun ketika blog di akses dari mobile atau smartphone dkk. 


Animation Loading Earthquake Effect

1. Masuk Edit HTML Template Blogger.
2. Selanjutnya cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya
@keyframes Earthquake{ /* Untuk browser Mozilla */
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(8deg);}
20%{opacity:1;transform:rotate(-8deg);}
25%{opacity:1;transform:rotate(10deg);}
30%{opacity:1;transform:rotate(-10deg);}
35%{opacity:1;transform:rotate(-10deg);}
40%{opacity:1;transform:rotate(12deg);}
45%{opacity:1;transform:rotate(-12deg);}
50%{opacity:1;transform:rotate(15deg);}
55%{opacity:1;transform:rotate(-15deg);}
60%{opacity:1;transform:rotate(12deg);}
65%{opacity:1;transform:rotate(-12deg);}
70%{opacity:1;transform:rotate(10deg);}
80%{opacity:1;transform:rotate(-10deg);}
85%{opacity:1;transform:rotate(8deg);}
90%{opacity:1;transform:rotate(-8deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}
@-webkit-keyframes Earthquake{  /* Untuk browser Safari dan Chrome */
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(8deg);}
20%{opacity:1;transform:rotate(-8deg);}
25%{opacity:1;transform:rotate(10deg);}
30%{opacity:1;transform:rotate(-10deg);}
35%{opacity:1;transform:rotate(-10deg);}
40%{opacity:1;transform:rotate(12deg);}
45%{opacity:1;transform:rotate(-12deg);}
50%{opacity:1;transform:rotate(15deg);}
55%{opacity:1;transform:rotate(-15deg);}
60%{opacity:1;transform:rotate(12deg);}
65%{opacity:1;transform:rotate(-12deg);}
70%{opacity:1;transform:rotate(10deg);}
80%{opacity:1;transform:rotate(-10deg);}
85%{opacity:1;transform:rotate(8deg);}
90%{opacity:1;transform:rotate(-8deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}
@-o-keyframes Earthquake{ /* Untuk browser Opera */
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);}
}
3. Sisipkan kode animation:Earthquake 4s infinite; -webkit-animation:Earthquake 4s infinite; -o-animation:Earthquake 4s infinite; ke bagian yang ingin anda beri efek, misalkan pada #outer-wrapper . Contohnya:
#outer-wrapper { animation:Earthquake 4s infinite; -webkit-animation:Earthquake 4s infinite; -o-animation:Earthquake 4s infinite; }
4. Save Template.

Live Demo Animation Earthquake Effect


Animasi loading Keyframe Bounce And Rotate

Untuk demonya ketika anda memasangnya di template adalah seperti diatas seandainya di atas adalah template atau blog anda. Tentusaja jika di pasang di blog sangat berbeda dengan demo diatas yang terus bergerak tanpa henti.

Untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading lebih cepat atau dinaikan 4s menjadi 8s dan seterusnya untuk loading yang lebih lama. Ok sobat sekian untuk saat ini, semoga bermanfaat. 
1 Komentar untuk "Membuat Animation Loading Earthquake Effect"

ya, boleh lah di coba.....
makasi bro......