So i made this css code to test the use of css animations with variables in order to apply them in many things (i.e font color, gradients, backgrounds). The code works well in any browser but firefox, does anyone know how can i fix it?
:root {
--color: 0, 0, 0;
-webkit-animation: rainbow 5s infinite;
-moz-animation: rainbow 5s infinite;
-ms-animation: rainbow 5s infinite;
-o-animation: rainbow 5s infinite;
animation: rainbow 5s infinite;
}
@-moz-keyframes rainbow{
0%{--color: 255, 0, 0;}
1%{--color: 255, 26, 0;}
2%{--color: 255, 51, 0;}
3%{--color: 255, 77, 0;}
4%{--color: 255, 102, 0;}
5%{--color: 255, 128, 0;}
6%{--color: 255, 153, 0;}
7%{--color: 255, 179, 0;}
8%{--color: 255, 204, 0;}
9%{--color: 255, 230, 0;}
10%{--color: 255, 255, 0;}
...
}
@keyframes rainbow{
0%{--color: 255, 0, 0;}
1%{--color: 255, 26, 0;}
2%{--color: 255, 51, 0;}
3%{--color: 255, 77, 0;}
4%{--color: 255, 102, 0;}
5%{--color: 255, 128, 0;}
6%{--color: 255, 153, 0;}
7%{--color: 255, 179, 0;}
8%{--color: 255, 204, 0;}
9%{--color: 255, 230, 0;}
10%{--color: 255, 255, 0;}
...
}
