Membuat Animasi Loading Dengan Efek Membesar

kali ini mnchealthdonesia akan membahas tentang animasi loading halaman pada blog dengan memanfaatkan css @keyframes, artikel yang lalau mnchealthdonesia pernah membahas "Mempercantik Load Blog Dengan @KeyFrame" dan inipun sama hanya saja untuk efek kali ini ada memebesar, tampilan blog terlihat kecil dan lama-kelamaan menjadi besar seperti tampilan normal..  Lihat saja DEMO agar lebih jelas.

---

• Demo

---

Untuk penerapanya sama dengan css efek Highlight, cukup tambahan kode css3 dibawah ini diatas kode : 

]]></b:skin>.

Kode CSS

<style> 

@-webkit-keyframes membesar {

from { -webkit-transform:  scale(0.1) }

to { -webkit-transform: scale(1.0) }

}

@-moz-keyframes membesar {

from { -moz-transform:  scale(0.1) }

to { -moz-transform: scale(1.0) }

}

@-o-keyframes membesar {

from { -o-transform:  scale(0.1) }

to { -o-transform: scale(1.0) }

}

@-ms-keyframes membesar {

from { -ms-transform:  scale(0.1) }

to { -ms-transform: scale(1.0) }

}

@keyframes membesar {

from { transform:  scale(0.1) }

to { transform: scale(1.0) }

}

body {

-webkit-animation:membesar 10s;

-moz-animation:membesar 10s;

-ms-animation:membesar 10s;

-o-animation:membesar 10s;

animation:membesar 10s;

}

</style> 

Catatan: Ganti body dengan element yang ingin anda beri efek misalnya #sidebar-wrapper.
10s merupakan waktu bergeraknya efek, semakin besar angkanya maka semakin lambat. Jika ingin menerapkan efek ini pada semua element kodenya pemanggilnya seperti ini.

• Simpan template

Silahkan anda sesuaikan sendiri..

---

Jika ingin menerapkan efek ini pada semua element kodenya pemanggilnya seperti ini :

Kode CSS

* {

-webkit-animation:membesar 10s;

-moz-animation:membesar 10s;

-ms-animation:membesar 10s;

-o-animation:membesar 10s;

animation:membesar 10s;

}

---

Tweet