Saya sempat mengira, kalau animasi stiker di facebook menggunakan gif, ternyata bukan.

Animasi tersebut menggunakan javascript dengan mengubah posisi backgound.

Coba saja klik kanan pada stikernya, kemudian pilih inspect element, maka kita akan mendapatkan kode seperti ini.

Inspect Element Sticker Facebook

Terlihat pada kode di atas, stikernya menggunakan backgound image. Ketika kita membuka backgound tersebut, kita akan mendapatkan gambar seperti berikut ini.

Animasi Gambar dengan Javascript

Sekarang, bagaimana kalau kita coba membuatnya.

Kode HTML

Buat kode HTML untuk menampilkan stikernya.

Kode CSS

.sticker {
    position: relative;
    height: 80px;
    width: 80px;
    background: url(burung.png);
    background-size: 320px 320px;
    cursor: default;
    background-position: 0px 0px;
    image-rendering: -webkit-optimize-contrast;
}

Pada kode CSS di atas, terdapat background bernama burung.png. Silahkan download di sini.

Javascript

Javascript fungsinya untuk membuat animasi, mengubah posisi background.

Pada kode di atas kita menggunakan fungsi setInterval() untuk melakukan animasi dengan waktu 100 milidetik. Setiap rentang waktu tersebut, posisi background akan berubah sesuai dengan nilai x dan y.

Demo