Keyframes animation not working in Firefox - html

Question

This animation is working perfectly in Safari and Chrome, but isn't working in Firefox.
I've tried a few things including -moz prefixes
Can anyone offer me advice on what's wrong here?
Here's the JSFiddle
HTML
<span class="awesome">
<span class="underline"></span>
<span class="underline2"></span>
awesome
</span>
CSS
span.awesome{
position: relative;
}
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
span.underline2{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
opacity: 0.2;
width: 110px;
}
#-webkit-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}
#keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}

Answer 1

The problem was a typo – the last value read 0% instead of 100%
Don't need to specify -moz selectors for CSS3 animations in the latest versions of Firefox, but thanks for your suggestion, #Unykvis
Corrected CSS:
span.awesome{
position: relative;
}
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
span.underline2{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
opacity: 0.2;
width: 110px;
}
#-webkit-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
100%{
width: 0px;
}
}
#keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
100%{
width: 0px;
}
}
Working JSFiddle

Answer 2

You need to add the -moz- to the keyframe animation and also to the selector.
Here is a working example: http://jsfiddle.net/ignaciocorreia/DxZps/4/
CSS:
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
-moz-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
#-moz-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}