listen in browser to stream surah al-kahfi

CARA MEMBUAT EFEK LOADING DENGAN KEYFRAME DI BLOG

membuat efek animasi Loading Dengan Dengan Keyframe
www.rasapoetra.xyz


caranya sangat mudah asalkan sobat mengerti letak dan bagian-bagian css ditemplate sobat yang nantinya akan ditambahkan efek loading keyframe ini. 

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


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


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.

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

5. Save Template dan coba lihat hasilnya.



TERIMA KASIH
SEMOGA BERMANFAAT

Posting Komentar

0 Komentar