CSS 关键帧动画在 Chrome 中工作，但不能在 FF(或 IE)中使用

Question

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

她的代码笔链接：

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周围有引号（''）。删除它们，它将起作用。

更新的代码笔