Animasi Loading Dengan CSS Efek Membesar (Scale)

Pada kesempatan kalai ini saya akan membahas tentang animasi loading halaman pada blog dengan memanfaatkan css @keyframes, beberapa minggu yang lalau saya pernah membahas "Animasi Loading Dengan CSS Efek Transform" 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. :D

Untuk penerapanya sama dengan css efek transform, berikut langkah-langkahnya..
1. Login Akun blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode css berikut ini dibawah kode ]]></b:skin>

<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> 

4. Simpan template

// Silahkan anda sesuaikan sendiri..
Ganti body dengan element yang ingin anda beri efek misalnya #sidebar-wrapper, #main-wrapper dll.
10s merupakan waktu bergeraknya efek, semakin besar angkanya maka semakin lambat.

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

* {
-webkit-animation:membesar 10s;
-moz-animation:membesar 10s;
-ms-animation:membesar 10s;
-o-animation:membesar 10s;
animation:membesar 10s;
}

Ok sekian pambahasan tentang Animasi Loading Dengan CSS Efek Membesar (Scale) semoga bermanfaat. :)