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

RESOLVED DUPLICATE of bug 546052

Status

()

defect
P4
normal
RESOLVED DUPLICATE of bug 546052
7 years ago
7 years ago

People

(Reporter: ravimurthy, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Reporter

Description

7 years ago
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.
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.
OS: Windows 7 → All
Hardware: x86_64 → All
Summary: @moz-keyframes does not support the url property for background image → [css4-images] interpolation (for animations and transitions) of images not supported (for, e.g., background-image)
Priority: -- → P4
Version: 12 Branch → Trunk
Status: UNCONFIRMED → NEW
Ever confirmed: true
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: cross-fade
You need to log in before you can comment on or make changes to this bug.