As we have seen, we can animate almost any CSS property,4 which includes, for instance, the background-position property. This allows you to create stop-motion animations using the traditional principle for making animated films (thus offering higher-quality alternatives to GIF animations). The key to this— as we will see — are the timing-functions.
4 Except for those
properties that do not permit, by definition, any intermediate steps — and
therefore no tweening — such as display:none →
One prerequisite for this is a background sprite that contains all the individual images comprising the animation (also known as “frames”). We will now look at this in action in an example.
The exercise files can be found in the support material
The file animations_stop_motion.html features an element with the ID hangman. In CSS it was assigned the image animation.jpg as a background image. This contains all the frames for the animation.
However, as the element #executioner has an exact width and height that correspond to the size of the first frame, only this is visible. The other frames are — as is always the case with background images — cut off and are therefore invisible.
Remember that the background-position property always has two values (horizontal and vertical), even if you only want to change one of them (in this case, horizontal).
A run through the animation move lasts a second and is played without any acceleration (linear) and indefinitely (infinite).
The key factor here is the timing-function. Apart from linear, ease, etc. there is also the instruction for playing the animation in “jumps” or steps. The function is called steps( ), and you need to insert the number of steps in the round brackets.
Replace in the animation property the value linear using steps(8, end):
Our animation comprises 9 frames, with the first and last being identical. As, in this case, the transition from the last image back to the first one would cause a noticeable delay in the animation, one of the two of them must be omitted. Therefore, we enter only 8 steps and use the second value to determine which of the two images — the first (start) or the last (end) — should be removed.
Now our stop-motion animation should run the way we want.