Tips Membuat Sebuah Efek Loading Dengan Keyframe di Blog

Tips Membuat Sebuah Efek Loading Dengna Keyframe di Blog | hallo sobat, pada kesempatan kali ini saya akan membagikan sebuah tips yang cukup menarik buat kalian yaitu Tips Membuat Sebuah Efek Loading Dengna Keyframe di Blog, jika kalian mencari cara untuk membuat sebuah efek loading, maka kalian berada pada tempat yang tepat yaitu di blog saya ini, di tahap-tahap pertama dimana kita menambahkan efek loading di blog. Caranya sangatlah mudah untuk diikuti asalkan sobat-sobat mudah mengerti letak dan bagian-bagian css ditemplate sobat tersebut, yang nantinya akan ditambahkan sebuah efek loading keyframe ini. Nah Berikut saya akan memberikan Tips atau Caranya :

Membuat Animation Slidding Effect

1. Masuklah ke Akun Blogger sobat,
2. Masuk ke Edit HTML Template Blogger sobat, Maka akan muncul kode-kode yang sangatlah banyak
3. Tambahkanlah kode di bawah ini ke CSS sobat dengan cara : Cari ]]></b:skin> lalu kemudian letakkan lah kode-kode di bawah ini tepat di atas sebelum kode ]]></b:skin>

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

4. Kemudian sisipkan kode animation sliding 2s; ke bagian yang ingin kalian beri effect tersebut, misalnya pada tempat #post-wrapper Sehingga menjadi

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

5. Kemudian setelah selesai silahkan kalian Save Template

Membuat Animation Bounce and Rotate

@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. Sisipkanlah kode animation BounceRate 3s; ke bagian yang ingin kalian beri effect misalkan pada #post-wrapper

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

5. Kemudian silahkan save template kalian dan selesai

Membuat Animation Earthquake Effect

@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 dimana kalian ingin berikan effect animation earthquake tersebut misalkan #post-wrapper Contohnya :

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

5. Save template kalian dan lihatlah hasil kalian di blog kalian

Nah dari ketiga animation effect tersebut yang manakah yang lebih kalian sukai? Kalo yang saya sukai adalah Animation Sliding, bagaimana dengan sobat?

Nah sekian dulu ya untuk artikel saya kali ini, semoga bermanfaat bagi kalian yang sedang mencari Tips Membuat Sebuah Efek Loading Dengna Keyframe di Blog. Terimakasih telah berkunjung keblog saya dan nantikan update artikel-artikel menarik dan tips menarik selanjutnya dari blog saya yah :D