CSS3 Animation with different images in each frame

Question

I'm attempting to perform a CSS animation, where a number of images are cycled through. I appreciate that normally one would use a sprite (and doing so works with this code), however as I wish to use this animation in iBooks, I have to keep to a 2 million pixel limit on each image, so instead I'm using separate images. So I'm attempting to use the following CSS, but to no success:

#sprite {
    width: 200px;
    height: 170px;
    background:url('../Images/monkey1small.png') 0 0;

    -webkit-animation-duration:4000ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:animate01;
    -webkit-animation-direction:forward;

    -moz-animation-duration:1ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:step-start;
    -moz-animation-name:animate01;
}
@-webkit-keyframes animate01 {
0%           { background:url('../Images/monkey1small.png') 0 0; }
20%          { background:url('../Images/monkey2small.png') 0 0; }
40%          { background:url('../Images/monkey3small.png') 0 0; }
60%          { background:url('../Images/monkey4small.png') 0 0; }
80%          { background:url('../Images/monkey5small.png') 0 0; }
100%         { background:url('../Images/monkey1small.png') 0 0; }
}
@-moz-keyframes animate01 {
0%           { background:url('../Images/monkey1small.png') 0 0; }
20%          { background:url('../Images/monkey2small.png') 0 0; }
40%          { background:url('../Images/monkey3small.png') 0 0; }
60%          { background:url('../Images/monkey4small.png') 0 0; }
80%          { background:url('../Images/monkey5small.png') 0 0; }
100%         { background:url('../Images/monkey1small.png') 0 0; }
}

It is called with a simple div:

At the moment it just statically displays the first image. I can add other css properties to the frames and it will animate those properties, however trying to change the background url as shown in the code above, does not work. Any suggestions?

Answer 1

What you posted works fine in Chrome and Safari (http://jsfiddle.net/4rAer/) but doesn't do a thing in Firefox. Where it dies in Firefox is the inclusion of a background image. You can animate background in Firefox - but only background colour. But if this is just for iBooks that shouldn't matter. I'm assuming the animation doesn't work in iBooks either.

This fiddle has a filmstrip that should have better support. It does require some additional HTML but I animating the Top property has broad support. http://jsfiddle.net/4rAer/1/

Answer 2

see here: http://chrismar.sh/2011/07/19/animating-sprites-using-css/

Do not animate the background-image property, do the background-position one!