Animasi Loading Dengan CSS Efek Membesar (Scale)

Dewa Teknik
CSS Style

Assalamualaikum sobat, pada kesempatan kali ini saya akan mencoba sharing mengenai CSS. Pertama apa yang dimaksud dengan CSS?? Apa kegunaannnya?? dan Apa Kepanjangannya?? Mungkin sobat akan bertanya-tanya seperti itu. CSS atau Cascading Style Sheet merupakan aturan yang dipakai dalam sebuah elemen HTML yang berfungsi sebagai pengendali beberapa komponen dalam suatu web agar lebih tersusun rapi dan terstruktur. CSS juga merupakan bentuk bahasa pemrograman yang wajib sobat ketahui dalam membangun sebuah website.
Oke langsung saja kembali ke topik. Pada artikel sebelumnya saya juga membahas tentang Cara Membuat Sidebar Multitab Dengan jQuery tetapi kali ini saya akan membahas tentang bagiamana membuat Animasi Loading Page Dengan Efek Zoom Menggunakan CSS. Setelah sobat memasang kode CSS ini, maka secara otomatis loading page dalam blog sobat akan berubah seperti zoom (membesar). Berikut tutorialnya:
  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
  2. Pada Dashboard, pilih Template --> Edit HTML.
  3. Letakkan kode berikut tepat dibawah kode  ]]></b:skin> 
    4. <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 sobat.
//Silahkan ubah sesuai keinginan sobat
Ganti body dengan elemen yang ingin sobat beri efek scale ini. Misalnya: #sidebar-wrapper, #main-wrapper dll. Ganti 10s (Waktu bergerak efek) sesuai keinginan sobat.

 Jika ingin menambahkan pada semua elemen gunakan kode pemanggilnya:
* {
-webkit-animation:membesar 10s;
-moz-animation:membesar 10s;
-ms-animation:membesar 10s;
-o-animation:membesar 10s;
animation:membesar 10s;
}
Ganti tanda "*" dengan elemen yang ingin diberi efek scale ini.
Sekian artikel saya kali ini, semoga bermanfaat dan selalu berkarya :)
Dewa Teknik