Pada hari weekend yang cerah ini saya akan membahas cara membuat animasi loading pada website/blog dengan css3 dengan efek transform. Efek ini akan mucul ketika membuka halaman yang hendak kita lihat, ketika sebuah element di terapkan efek ini makan element tersebut akan bergerak muncul dari bawah keatas, membuat website menjadi lebih keren tentunya. Tutorial ini saya dapatkan dari Blognya Mas Taufik DTE.
Langkah langkah penerapan Animasi Loading Dengan CSS Efek Transform
1. Login Akun blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode css berikut ini dibawah kode ]]></b:skin>

<style>

/* efek animasi halaman transform start */

@-webkit-keyframes transform-translate{

  from{-webkit-transform:translate(0px,1000px)}

  to{-webkit-transform:translate(0px,0px)}

}

@-moz-keyframes transform-translate{

  from{-moz-transform:translate(0px,1000px)}

  to{-moz-transform:translate(0px,0px)}

}

@-ms-keyframes transform-translate{

  from{-ms-transform:translate(0px,1000px)}

  to{-ms-transform:translate(0px,0px)}

}

@-o-keyframes transform-translate{

  from{-o-transform:translate(0px,1000px)}

  to{-o-transform:translate(0px,0px)}

}

@keyframes transform-translate{

  from{transform:translate(0px,1000px)}

  to{transform:translate(0px,0px)}

}

/* efek animasi halaman transform end */

/* implementasi pada element */

body {

  -webkit-animation:transform-translate 5s;

  -moz-animation:transform-translate 5s;

  -ms-animation:transform-translate 5s;

  -o-animation:transform-translate 5s;

  animation:transform-translate 5s;

}

</style> 

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

Demikian posting tentang Animasi Loading Dengan CSS Efek Transform, semoga bermanfaat untuk anda.