关键帧动画在Firefox中不起作用

Question

此动画在Safari和Chrome中完美运行，但在Firefox中无效。

我尝试了一些内容，包括-moz前缀

有人能就这里的错误向我提出建议吗？

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

问题是拼写错误 - 读取的最后一个值0%而不是100%

不需要在最新版本的Firefox中为CSS3动画指定-moz选择器，但感谢您的建议，@ Unykvis

更正了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

您需要将-moz-添加到关键帧动画以及选择器。 这是一个工作示例：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;
    }
}