CSS动画颜色更改在safari中无效

Question

我有这个css代码，我想让它在safari中工作(它是一个顶级进度条加载程序)，它可以在其他地方工作，但在那里：

.page-loading::before {
    content:" ";
    display:block;
    position:fixed;
    z-index:10;
    height:2px;
    width:100%;
    top:300px;
    left:0;
    background-color:#06D;
    animation: page-load infinite ease-out 2s;
    box-shadow:0 2px 2px rgba(0,0,0,.2);
}

@keyframes page-load {
    from {
        background-color: #ffc422;
    }
    to {
        background-color: #c0392b;
    }
}

(如果这很重要，这就是我用来加载它的js代码)

    window.addEventListener("beforeunload",function(e){
    document.body.className = "page-loading";
},false);

它在所有浏览器中都能很好地工作，但出于某种原因，它在safari中的任何地方都没有加载。这有什么原因不起作用吗?我可以添加某种类型的webkit /任何错误

Answer 1

用这个：

@-webkit-keyframes page-load {
    from {
        background-color: #ffc422;
    }
    to {
        background-color: #c0392b;
    }
}