I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers.
Below is where the animations are being applied:
:after
{
display:block;
background:url('../img/snow.png'), url('../img/snow2.png') ;
-webkit-animation: snow 15s linear infinite;
-moz-animation: snow 15s linear infinite;
-ms-animation: snow 15s linear infinite;
animation-name:snow;
animation-duration:15s;
animation-timing-function:linear;
height:500px;
width:100%;
content:'';
position:absolute;
top:0;
left:0;
}
Here are the animations themselves:
@-webkit-keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 0px 1000px, 0 500px;}
}
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 0px 1000px, 0 500px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 0px 1000px, 0 500px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 0px 1000px, 0 500px;}
}
If anyone has any insights or advice on how to fix this issue in Firefox, I would greatly appreciate it!