Sprite Animation

In 1878 Edward Muybridge produced the first sequence of photography setup using a device known as a Zoopraxiscope to produce the first known instance of videography.

Published by silentfilmhouse

This sequence of images has since entered public domain and we can use it to introduce a new animation property steps. We'll start looking at the public domain image.

The first four frames

If we were building our own sprite we would keep the coordinates of the image in a singular row or column to make the measurements easier. To simulate that we're going to resize our container for only the first row of pictures. Let's pretend our sprite is just these four pictures arranged in this order. We've adjusted the size of the image container and the position so only the first four frames are visible in the container.

Resizing for one frame

Each frame is about 250px.

Steps Timing Function

We can leverage the steps property to break up the animation into (#) parts from 0 - 100%. In our example below we break the transition from sliding the image left the width of itself into 4 parts. This automatically calculates the position at 4 points, these four points line up with the width of our pictures.

Without steps its a smooth transition. This example is slowed down from the previous example.