Animation/Gradient CSS3 suport for firefox - css

Question

I was earlier having problem with gradiens in firefox. I then placed the background: -moz-linear-gradient(left,red,blue); in the DIV instead of #keyframes changeSizeAndColor{} Now my problem is that it doesn´t change from blue to red instead it´s (red and blue ) all the time.
here the code:
#fifth-div{
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
font-family: helvetica;
font-size: 5px;
background-color: blue;
width: 200px;
height: 200px;
animation-name: changeSizeAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
-webkit-animation: changeSizeAndColor 5s infinite; /* Chrome, Safari, Opera */
animation: changeSizeAndColor 5s infinite;
background: -webkit-gradient();
background: -moz-linear-gradient(left,red,blue);
This(below) is how I originaly started out. Didn´t got my anywhere att all. Then I added as said above this line of code: background: -moz-linear-gradient(left, red, blue); in the css(in the div) and I got the radient working but not the shifting from only blue to radient(blue&red)(It just shows upp radient without the shifting from only blue to radient(red&blue) as in the other browsers.
#keyframes changeSizeAndColor {
from {
width: 200px;
height: 200px;
background-color: blue;
font-size: 5px;
}
to {
width: 300px;
height: 300px;
font-size: 25px;
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: repeating-linear-gradient(right, red, blue);
background image: -moz-linear-gradient(left, red, blue);
}

Answer 1

The most reliable way to change backgrounds, and the only working for all the browsers, is modifyng the position.
To apply this to your case, set a gradient in front of the stripped one, that changes from blue to transparent.
then , animate the position of this layer
#test {
width: 100px;
height: 100px;
animation: gradient 2s infinite;
background-image: linear-gradient(to top, blue, transparent),
repeating-linear-gradient(red, lightgreen 20%);
background-size: 100% 2000%, 100% 100%;
background-position: top center, top center;
}
#keyframes gradient {
0% {background-position: bottom center, top center;}
100% {background-position: top center, top center;}
}
<div id="test"></div>