Question

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

她的代码链接：

这是我的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;
        }
    }
}

及其作用的HTML：

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

我可以恢复使用gif，但如果可以正常渲染，这将会更加凉爽。

由于

Answer 1

因为''附近有引号（loadbars）。删除它们，它将工作。

更新了codepen

CSS Keyframe动画在Chrome中运行，但不是FF（或IE）

1 个答案: