
MEMBUAT ANIMATION SLIDING EFFECT
1. Di Blogger2. 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
@keyframes Sliding{4. Sisipkan kode
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#post-wrapper { animation : Sliding 2s; }5. Save Template
MEMBUAT ANIMATION BOUNCE AND ROTATE
1. Di Blogger2. Masuk ke Edit HTML Template anda
3. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode
@keyframes BounceRate{4. Sisipkan kode
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;}
}
#post-wrapper { animation : BounceRate 3s; }5. Save Template.
MEMBUAT ANIMATION EARTHQUAKE EFFECT
1. Di Blogger2. Masuk ke Edit HTML Template anda
3. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode
@keyframes Earthquake{4. Sisipkan kode
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);}
}
#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"
gak ada demonya ya mas?
ah iya demonya belum ada :)
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