Content

Cara Membuat Animasi Loading Blog Dengan CSS

Senin, 10 Maret 2014
Halo, apa kabar Agan2 sekalian, semoga sehat sejahtera selalu

Kali ini saya akan posting cara membuat animasi loading blog dengan CSS seperti yang saya pakai pada blog ini, animasi ini dengan Efek Transform, sebuah elemen yang bergerak dari Bawah ke Atas, dan cara pemasangannya pada blog cukup mudah.
Silahkan ikuti langkah pemasangan dibawah :
  • Cara yang pertama pasti harus login ke blog agan dulu, Hehe,,
  • Okay, tanpa basa - basi, langsung klik Edit Template
  • Cari kode ]]><b:skin> , untuk mempermudah pencarian CTRL+F pada keyboard
  • Setelah ketemu, Copy/Salin kode CSS ini tepat dibawah ]]><b:skin>
<style type='text/css'>
/* 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>
  • Simpan template, lihat hasilnya
    Salam sejahtera selalu, semoga bermanfaat . . .

0 komentar:

Posting Komentar