CSS 关键帧动画在 Chrome 中工作，但不是 FF（或 IE）

Question

我使用关键帧使用 CSS 动画完成了一些加载条。它在 Chrome 中运行良好，但在 FireFox 中却不行。我仔细检查了所有前缀是否正确，我尝试更改单位和调整值，但似乎没有任何效果。

她是一个codepen链接：

http://codepen.io/aviemet/pen/YPXzLQ

这是我的无礼：

@-webkit-keyframes 'loadbars' {
    0%{
        height: 10px;
        margin-top: 25px;
    }
    50%{
        height:50px;
        margin-top: 0px;
    }
    100%{
        height: 10px;
        margin-top: 25px;
    }
}
@-moz-keyframes 'loadbars' {
    0%{
        height: 10px;
        margin-top: 25px;
    }
    50%{
        height:50px;
        margin-top: 0px;
    }
    100%{
        height: 10px;
        margin-top: 25px;
    }
}
@-o-keyframes 'loadbars' {
    0%{
        height: 10px;
        margin-top: 25px;
    }
    50%{
        height:50px;
        margin-top: 0px;
    }
    100%{
        height: 10px;
        margin-top: 25px;
    }
}
@keyframes 'loadbars' {
    0%{
        height: 10px;
        margin-top: 25px;
    }
    50%{
        height:50px;
        margin-top: 0px;
    }
    100%{
        height: 10px;
        margin-top: 25px;
    }
}
@-webkit-keyframes 'loadbars' {
    0%{
        height: 10px;
        margin-top: 25px;
    }
    50%{
        height:50px;
        margin-top: 0px;
    }
    100%{
        height: 10px;
        margin-top: 25px;
    }
}

#loading{
    position: fixed;
    top: 36%;

    .loader{
        z-index: 3;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        width: 60px;
        height: 60px;
        list-style: none;

        li{
            background-color: #FFFFFF;
            width: 10px;
            height: 10px;
            float: right;
            margin-right: 5px;
            box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.2);
        }

        li:first-child{
            -webkit-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
               -moz-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
                 -o-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
                    animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
        }

        li:nth-child(2){
            -webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s;
               -moz-animation: loadbars 0.6s ease-in-out infinite -0.2s;
                 -o-animation: loadbars 0.6s ease-in-out infinite -0.2s;
                    animation: loadbars 0.6s ease-in-out infinite -0.2s;
        }

        li:nth-child(3){
            -webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s;
               -moz-animation: loadbars 0.6s ease-in-out infinite -0.4s;
                 -o-animation: loadbars 0.6s ease-in-out infinite -0.4s;
                    animation: loadbars 0.6s ease-in-out infinite -0.4s;
        }
    }
}

及其作用的 HTML：

<div id="loading">
    <ul class="loader">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

我可以恢复使用 gif，但如果它可以正确渲染，那就更酷了。

谢谢

Answer 1

因为loadbars 周围有引号（''）。删除它们，它会起作用。

更新codepen