Laithan Membuat Animasi Gambar dengan Tangan Anda Sendiri (CSS)

1.GAMBAR DASAR SAYA PAKE FORMAT PNG BIAR KELIHATAN NYATA ?

2.GAMBAR HASIL CSS nya.

Cara Membuatnya Cukup Mudah Hanya Perlu Dibawah Ini ?

 CSS nya :

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");
    
    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

HTML nya :

Silahkan Anda Ganti URL gambar "http://files.simurai.com/misc/sprite.png" sesuai keinginang Anda ! Sekian Untuk Latihanya ?wkwk..
Kalo Penjelasanya Kurang Lengkap , Tolong Ma'afkan saya ???hoho... Soalnya nih ,, Sudah malem .. Aku ngantukk ?he..he

|| ❖ | Copy Right By : Portal Gallery | Design By : Cuerosbhelatos ||