Animasi loading Keyframe Bounce And Rotate
Animasi loading Bounce And Rotate di Blogspot. Ok sobat masih dengan membuat efek loading blog dengan @keyframe, yaitu cara membuat animasi loading efek bounce and rotate di blog. Sebelumnya juga seocips.com telah membagikan cara membuat efek loading sliding efek yang juga menggunakan keyframe.

Anda dapat menerapkan efek keyframe ini di loading blog anda, Efek ini hanya menggunakan CSS dan tidak menggunakan javascript jadi tidak mempengaruhi loading blog begitu besar. Kelemahannya efek ini tidak akan terlihat untuk beberapa browser versi terdahulu dan beberapa efek tidak muncul di beberapa browser. CSS animasi keyframe selain bisa kita gunakan untuk memuat halaman loading masih banyak lagi yang dapat kita gunakan dengan animasi ini.

Animasi Loading Bounce And Rotate Keyframe Effect

1. Masuk Edit HTML Template Blogger.
2. Selanjutnya cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya
@keyframes Brt{
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;}
}
3. Sisipkan kode animation : Brt 3s; ke bagian yang ingin anda beri efek, misalkan pada #outer-wrapper . Contohnya:
#outer-wrapper { animation : Brt 3s; }
4. Save Template

Live demo Bounce and rotate keyframe effect.


Animasi loading Keyframe Bounce And Rotate

Mungkin efek rotatenya tidak akan kelihatan di Mozilla. Untuk cara pertama tidak support untuk beberapa browser bahkan tidak terlihat di chrome, efeknya terlihat di mozila tapi beberapa tidak bekerja. Jika begitu hapus saja dan ganti dengan kode dibawah ini. Langkah-langkahnya sama saja seperti diatas.

1. Masuk Edit HTML Template Blogger sobat.
2. Cari kode ]]></b:skin> lalu letakan kode di bawah ini di atasnya
@-webkit-keyframes Brt{ /* Safari and Chrome */
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;}
}
@keyframes Brt{ /* Fox */
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;}
}
@-o-keyframes Brt{ /* Opera */
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;}
}
3. Sisipkan kode   -webkit-animation:Brt 3s; animation : Brt 3s;-o-animation:Brt 3s;  ke bagian yang ingin anda beri efek, misalkan pada #outer-wrapper. contohnya:
#outer-wrapper {-webkit-animation:Brt 3s; animation : Brt 3s;-o-animation:Brt 3s; }
4. Save Template dan lihat hasilnya.

Untuk kecepatan loading tinggal sobat setting misalnya 3s di turunkan menjadi 2s untuk efek loading lebih cepat.  Untuk efek loading lainnya yang menggunakan keyframe silahkan baca disini. Nah sekian efek blog yang dapat di bagikan untuk saat ini. Ok semoga bermanfaat.
0 Komentar untuk "Membuat Animasi Loading Bounce And Rotate Di Blog"