Keyframes animation not working in Firefox

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;
    }
}