Cara Membuat Efek Loading Dengan Animasi Keyframes

Cara Membuat Efek Loading  Dengan Animasi Keyframes

Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun. Langsung saja gak usah panjang lebar..

Animation Bounce and Rotate

1. Login ke BLogger.com
2. Edit HTML
3. 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

Animation Earthquake Effect

1. Login ke BLogger.com
2. Edit HTML
3. 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

Animation Sliding Effect

1. Login ke BLogger.com
2. Edit HTML
3. 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
#post-wrapper { animation : Sliding 2s; }
5. Save Template

Sekian dari saya, semoga artikel ini bermanfaat buat Anda dan dapat menarik pengunjung blog anda..

1 Response to "Cara Membuat Efek Loading Dengan Animasi Keyframes"

  1. ######## SEXUALITAS


    http://sexualitass.blogspot.com/2010/03/gaya-seks-anal.html
    http://sexualitass.blogspot.com/2015/04/foto-cewek-lesby.html
    http://sexualitass.blogspot.com/2015/03/8-pesta-sex-di-pantai.html
    http://sexualitass.blogspot.com/2015/02/foto-selfie-bugil-siswi-smp.html
    http://sexualitass.blogspot.com/2015/02/siswi-smp-di-foto-bugil-setelah-di.html
    http://sexualitass.blogspot.com/2015/02/siswi-foto-bugil-di-kamar-mandi.html
    http://sexualitass.blogspot.com/2015/03/kisah-nyata-gadis-16-tahun-maniak-seks.html
    http://sexualitass.blogspot.com/2015/04/cerita-gigolo-ngesek-tante-girang-cantik.html
    http://sexualitass.blogspot.com/2015/04/9-gadis-cantik-jepang-girl-jepang-hot.html
    http://sexualitass.blogspot.com/2015/03/6-seputar-mitos-alat-kelamin-pria.html
    http://sexualitass.blogspot.com/2015/03/5-sepatu-basket-paling-top-dalam-sejarah.html
    http://sexualitass.blogspot.com/2015/04/5-makanan-perangsang-gairah-seks-pria.html
    http://sexualitass.blogspot.com
    http://sexualitass.blogspot.com/2015/05/school-girl-jepang-hot.html
    http://sexualitass.blogspot.com/2015/05/ramuan-perapat-tradisional-kewanitaan.html
    http://sexualitass.blogspot.com/2015/05/cerita-mesum-aku-ketagihan-di-perkosa.html
    http://sexualitass.blogspot.com/2015/05/cerita-sex-anal-bersama-bu-fatimah.html
    http://sexualitass.blogspot.com/2015/05/video-bokep-dokter-mesum-dengan-pasien.html
    http://sexualitass.blogspot.com/2015/05/video-mesum-anak-sekolah-di-dalam-bus.html
    http://sexualitass.blogspot.com/search/label/Sexualitas%20Pria
    http://sexualitass.blogspot.com/search/label/Sexualitas%20Wanita
    http://sexualitass.blogspot.com/2015/02/payudara-besar-lima-artis-cantik-dunia.html

    ReplyDelete

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).