Cara Membuat Efek Loading Dengan Keyframe Di Blog

Cara Membuat Efek Loading Dengan Keyframe Di Blog. Ok sobat untuk anda yang mencari tutorial cara membuat efek animasi Loading Dengan Dengan Keyframe maka sobat ada di tempat yang tepat. Efek loading blog memang ada banyak jenisnya seperti cara membuat animasi loading blog yang pertama dimana kita menambahkan efek loading diblog. Caranya sangat mudah asalkan sobat mengerti letak dan bagian-bagian css ditemplate sobat yang nantinya akan ditambahkan efek loading keyframe ini. Ok berikut ini adalah tutorialnya.

MEMBUAT ANIMATION SLIDING EFFECT

1. Di Blogger
2. Masuk Edit HTML Template Blogger sobat, Maka akan terbuka kode yang banyak sekali. kemudian,..
3. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

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

4. Sisipkan kode animation: Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper.Sehingga menjadi

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

5. Save Template

DEMO + UPDATE

MEMBUAT ANIMATION BOUNCE AND ROTATE

1. Di Blogger
2. Masuk ke Edit HTML Template anda
3. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@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. Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #post-wrapper

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

5. Save Template.

DEMO + UPDATE

MEMBUAT ANIMATION EARTHQUAKE EFFECT

1. Di Blogger
2. Masuk ke Edit HTML Template anda
3. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@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 yang ingin anda beri efek, misalkan pada #post-wrapper . Contohnya:

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

5. Save Template dan lihat hasilnya.

DEMO + UPDATE

Dari ketiga efect loading blog diatas yang paling menarik menurut saya dalah animasi loading Sliding effect. Nah bagaimana dengan sobat?

Ok sob, semoga dengan menggunakan keyframe saat loading blog dapat menambah daya tarik blog anda. Sekian tutorial yang dapat dibagikan oleh anisuka.com semoga bermanfaat.

Diposkan oleh

Brando Mewo

You Might Also Like: