Animated JPEG

Uses JPEG and Javascript instead of an animated GIF to create something better. See http://stackoverflow.com/a/10139720/124119 for more info.

by PAEz

HTML

<div id="sprite"></div>

CSS

#sprite {
    background: url('http://i.imgur.com/ykWoo.jpg');
    position: relative;
    height: 160px;
    width: 160px;
    left: 50%;
    margin-left: -80px;
    margin-top: 1em;
    color: white;
}

JavaScript

var json = {
    "framesize": {
        "w": 160,
        "h": 160,
    },
    "frames": [
        {
        "x": 0,
        "y": 0,
        "ms": 66},
    {
        "x": 160,
        "y": 0,
        "ms": 66},
    {
        "x": 320,
        "y": 0,
        "ms": 66},
    {
        "x": 480,
        "y": 0,
        "ms": 66},
    {
        "x": 640,
        "y": 0,
        "ms": 66},
    {
        "x": 800,
        "y": 0,
        "ms": 66},
    {
        "x": 960,
        "y": 0,
        "ms": 66},
    {
        "x": 1120,
        "y": 0,
        "ms": 66},
    {
        "x": 1280,
        "y": 0,
        "ms": 66},
    {
        "x": 1440,
        "y": 0,
        "ms": 66},
    {
        "x": 1600,
        "y": 0,
        "ms": 66},
    {
        "x": 1760,
        "y": 0,
        "ms": 66},
    {
        "x": 0,
        "y": 160,
        "ms": 66},
    {
        "x": 160,
        "y": 160,
        "ms": 66},
    {
        "x": 320,
        "y": 160,
        "ms": 66},
    {
        "x": 480,
        "y": 160,
        "ms": 66},
    {
        "x": 640,
        "y": 160,
        "ms": 66},
    {
        "x": 800,
        "y": 160,
        "ms": 66},
    {
        "x": 960,
        "y": 160,
        "ms": 66},
    {
        "x": 1120,
        "y": 160,
        "ms": 66},
    {
        "x": 1280,
        "y": 160,
        "ms": 66},
    {
        "x": 1440,
        "y": 160,
        "ms": 66},
    {
        "x": 1600,
        "y": 160,
        "ms": 66},
    {
        "x": 1760,
        "y": 160,
        "ms": 66},
    {
        "x": 0,
        "y": 320,
        "ms": 66},
    {
        "x": 160,
        "y": 320,
        "ms": 66},
    {
        "x": 320,
        "y": 320,
        "ms": 66},
    {
        "x": 480,
        "y": 320,
        "ms": 66},
    {
        "x": 640,
        "y": 320,
        "ms": 66},
    {
        "x": 800,
        "y": 320,
        "ms": 66},
    {
        "x": 960,
        "y": 320,
        "ms": 66},
    {
        "x": 1120,
      ...