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 efek animasi Loading Dengan Dengan Keyframe

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 . Contohnya:
#post-wrapper { animation : Earthquake 3s; }
5. Save Template dan lihat hasilnya.



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 seocips.com semoga bermanfaat.
6 Komentar untuk "Cara Membuat Efek Loading Dengan Keyframe Di Blog"

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

maksudnya gimana mas?

Nah sekarang membuat efek loading blog dengan keyframe di atas sudah ada demonya. Silahkan di cek.

Ituh hanya contoh gan. Maksudnya CSS atau bagian dari template yang ingin sobat pasangin effect Slidenya. bisa juga di kodenya ditambahkan di tempat/kode css lain yang sobat inginkan. Untuk lebih jelasnya silahkan cek demo plus update yang sudah saya tambahkan diatas.

Bagus nih gan, numpang nyimak ya :-D