Css3 background-image animation animate too soon - css

Question

I am trying to do a css3 animation on multiple elements.
All those elements have different background-image and they must be replace in the middle of the animation.
The thing is, I want to use the same animation for all elements.
Wich mean, I can't write the original background-image in the animation.
But, the absence of original background-image make the background-image animate with the rest.
I think I would need something like:
background-image: default;
But I don't think it exist.
Anyone have an idea?
Example:
http://jsfiddle.net/4SRrR/
(Look how the background-image start fading to the red one before the div is out of the screen.)
Html:
<div class="anim"></div>
Css:
.anim {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png");
-webkit-animation: anim .75s forwards ease-in;
}
#-webkit-keyframes anim {
0% {-webkit-transform: translateX(0px);}
50% {-webkit-transform: translateX(-400px);}
51% {-webkit-transform: translateX(-400px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
100% {-webkit-transform: translateX(0px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
}

Answer 1

One posibility would be to have 2 backgrounds, and then in the animation just reference the sizes of the first and the second one:
fiddle
The CSS would be:
.anim {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png"), url("http://www.vt2k.com/processing/images/redball.jpg");
background-size: 100% 100%, 0% 100%;
background-repeat: no-repeat;
-webkit-animation: anim 7.5s forwards ease-in;
}
#-webkit-keyframes anim {
0% {-webkit-transform: translateX(0px); background-size: 100% 100%, 0% 0%;}
50% {-webkit-transform: translateX(-400px);background-size: 100% 100%, 0% 0%;}
51% {-webkit-transform: translateX(-400px); background-size: 0% 0%, 100% 100%; }
100% {-webkit-transform: translateX(0px); background-size: 0% 0%, 100% 100%;}
}
I have increased the duraion of the transition so that it is more visible. And also overdefined the background-size; it wouldn't be necesary to repeat it in every frame.

Answer 2

I'm confused as to what the question is but I'll take a stab at it. If you take the 51% animation off then it seems to work slightly better. It will shrink until it is gone and then as it comes back the background-image fades in.
One of the hard things with CSS3 animations is that there isn't an easy way to tell when the animation is 50% done. What you could do is 2 keyframe animations. With JS you can listen for the first animation ending. You could add the background-image and then the class that will trigger the second part of the animation. It's not pretty but could work.