Question

我在我的网站上显示了一个CSS动画，它在Safari中不起作用。知道我错过了什么？

.arrow {
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 100px;
    position: relative;
    bottom: 30px;
    left: 50%;
    margin-left: -50px;
    -webkit-animation: arrow 3.5s infinite;
    animation: arrow 3.5s infinite;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* Chrome, Safari, Opera */ 
@-webkit-keyframes arrow {
    0%   {top: 0;}
    100% {top: 50px;}
}

/* Standard syntax */
@keyframes arrow {
    0%   {top: 0;}
    100% {top: 50px;}
}

Answer 1

您的问题可能是您的图像路径。放入完整的图像路径，您会发现您的代码有效。看小提琴（jsfiddle.net/8pam49pr）。它在Safari中工作 - 我测试过它 - 没有调整，除了我指定了一个完整的文件路径。

CSS动画在Safari中不起作用：/

1 个答案: