743427 - [css4-images] interpolation (for animations and transitions) of images not supported (for, e.g., background-image)

Status: RESOLVED DUPLICATE of bug 546052

(Core :: CSS Parsing and Computation, defect, P4)

Description

[Ravi]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0
Build ID: 20120403211507

Steps to reproduce:

I wrote a test html page and used CSS3 animations to animate across various images. 
Here is the test code(Not working):
body
{
background:url(resized2/2.jpg);
position:absolute;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background:url(resized2/2.jpg);background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:url(resized2/3.jpg);background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:url(resized2/4.jpg); background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:url(resized2/5.jpg);background-repeat:no-repeat;background-size:100% 100%;}
100% {background:url(resized2/6.jpg); background-repeat:no-repeat;background-size:100% 100%;}
}

@-moz-keyframes myfirst
{
0%   {background:url(resized2/2.jpg);background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:url(resized2/3.jpg);background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:url(resized2/4.jpg); background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:url(resized2/5.jpg); background-repeat:no-repeat;background-size:100% 100%;}
100% {background:url(resized2/6.jpg); background-repeat:no-repeat;background-size:100% 100%;}
}

@-webkit-keyframes myfirst
{
0%   {background:url(resized2/2.jpg);background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:url(resized2/3.jpg);background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:url(resized2/4.jpg); background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:url(resized2/5.jpg); background-repeat:no-repeat;background-size:100% 100%;}
100% {background:url(resized2/6.jpg); background-repeat:no-repeat;background-size:100% 100%;}
}
</style>


Actual results:

The animations worked in Gogle Chrome, but not in Firefox. 


Expected results:

The animations should have worked in Firefox also. If I simply specify a colour, it works.
Here is an example of the working code:
body
{
background:url(resized2/2.jpg);
position:absolute;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes myfirst
{
0%   {background:url(resized2/2.jpg);background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:url(resized2/3.jpg);background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:url(resized2/4.jpg); background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:url(resized2/5.jpg);background-repeat:no-repeat;background-size:100% 100%;}
100% {background:url(resized2/6.jpg); background-repeat:no-repeat;background-size:100% 100%;}
}

@-moz-keyframes myfirst
{
0%   {background:yellow;background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:blue; background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:green;background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:orange; background-repeat:no-repeat;background-size:100% 100%;}
100% {background:cyan;background-repeat:no-repeat;background-size:100% 100%;}
}

@-webkit-keyframes myfirst
{
0%   {background:url(resized2/2.jpg);background-repeat:no-repeat;background-size:100% 100%;}
25%  {background:url(resized2/3.jpg);background-repeat:no-repeat;background-size:100% 100%;}
50%  {background:url(resized2/4.jpg); background-repeat:no-repeat;background-size:100% 100%;}
75%  {background:url(resized2/5.jpg); background-repeat:no-repeat;background-size:100% 100%;}
100% {background:url(resized2/6.jpg); background-repeat:no-repeat;background-size:100% 100%;}
}
</style>

Note that in the moz section, the background is specified using colours while the webkit section uses the images.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The correct behavior for interpolation of images hasn't been specified yet, and it's been postponed to css4-images.  If we wanted to implement this, we'd at least want to get some consensus in the working group about what the right path forward is.