Why does my animation not work in Firefox? - css

Question

I have some code that works perfectly in Chrome but it doesn't work in Firefox
I want my logo image shine in my website. Code runs in Chrome but I don't know why it doesn't work in Firefox.
.shine-me {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
animation:ShineAnimation 5s infinite;
animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}
#-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
#keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
p
{
background-color:#c0c0c0;
padding:15px;
}

Answer 1

It doesn't work in Firefox because of two reasons:
You are using the old WebKit specific linear gradient syntax inside the #keyframes rule. The new syntax must have the to keyword before the sides (like to top left).
Firefox doesn't support declaring the background-image within #keyframes unlike browsers that use WebKit. The reason is described in my answer here. Move the background-image properties that are applied within the 0% frame to the base selector and animate just background-position.
.shine-me {
width: 100%; /*Make sure the animation is over the whole element*/
background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
background-position: -250px -250px;
background-size: 600px 600px;
background-repeat: no-repeat;
-webkit-animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
}
#-webkit-keyframes ShineAnimation {
from {
background-position: -250px -250px;
}
to {
background-position: 500px 0px;
}
}
#keyframes ShineAnimation {
from {
background-position: -250px -250px;
}
to {
background-position: 500px 0px; /* increase the X position as required */
}
}
p {
background-color: #c0c0c0;
padding: 15px;
}
<p class='shine-me'>Some text</p>

Answer 2

You will also need to add following css :
-moz-animation:ShineAnimation 5s infinite;
-moz-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
#-moz-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}