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. :)
Judul :
Animasi Loading Dengan CSS Efek Membesar (Scale)
Deskripsi : Pada kesempatan kalai ini saya akan membahas tentang animasi loading halaman pada blog dengan memanfaatkan css @keyframes, beberapa mingg...
