Animasi Loading Dengan CSS3 Transform

CSS3 Animation Transform

Pada kesempatan kali ini saya akan membahas cara untuk membuat animasi loading dengan CSS3 dengan efek Transform. Efek ini  muncul dari arah kanan ke posisi Element tersebut sudah diatur, diblog ini saya juga menggunakannya tetapi hanya pada element description.

Demo

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

<style>
body {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
}

@-moz-keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

@-webkit-keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
</style>

4. Simpan template.

Element body diatas anda ganti dengan element yang lain jika anda memilih untuk tidak memakai nya pada keselurahan badan blog anda MISALNYA: #sidebar-wrapper, #main-wrapper, #header-wrapper dll.
3s merupakan waktu bergeraknya efek, semakin besar angkanya maka semakin lambat. Semoga berguna..