CSS Keyframe animation working in Chrome, but not FF (or IE)

问题

I have some loading bars done with CSS animations using keyframes. It works great in Chrome, but not in FireFox. I've double checked that all of the prefixes are correct, I've tried changing units and adjusting values, but nothing seems to make it work.

Her's a codepen link:

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

and here's my sass:

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

and the HTML it acts on:

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

I could revert to using a gif, but this would be so much cooler if it could render properly.

Thanks

回答1:

Because you have quotation marks('') around loadbars. Remove them and it will work.

Updated codepen

来源：https://stackoverflow.com/questions/27097327/css-keyframe-animation-working-in-chrome-but-not-ff-or-ie