Uitleg background-position: steps

Twitter:

Breedte en hoogte van 1 frame = 150 pixels

We schuiven de achtergrond naar links op via de eigenschap background-position.

.animation {
       background-image: url(sprite.png); /* afbeelding met alle frames samen */
       height: 150px; /* breedte en hoogte van 1 frame */
       width: 150px;

    	animation: sprite-animation .6s steps(12,end) infinite; /* steps = aantal stappen  */
}


@keyframes sprite-animation {
        from { background-position: 0 0; }
        to { background-position: -1800px 0; } /* sprite afbeelding breedte  */
}

Nog een voorbeeldje: