Question

我有一个css关键帧背景动画在Chrome上运行但在Sarari 11（Mac）上没有。我试图添加-webkit-前缀，它不再工作，不再需要了。

请问好吗？

button {
    height: 34px;
    line-height: 18px;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    bottom: 60px;
    animation-name: shiny;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes shiny{
    0% {
        background-repeat: no-repeat;
        background-size: 300px 300px;
        background-position: -300px -300px;
        background-image: -webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.4) 49%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.4) 51%,
            rgba(255, 255, 255, 0.0) 55%,
            rgba(255, 255, 255, 0.0) 100%
        );
    }
    100% {
        background-repeat: no-repeat;
        background-position: 300px 300px;
    }
}

Answer 1

I tried a simple example, it works normally

<html>
<head>
    <title>Blue Glow</title>
<style>
@-webkit-keyframes glow {
    0% { background-color: blue; }
    100% { background-color: red; }
}

div {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
}
</style>
</head>
<body>
   <div>       <p>I tried a simple example, it works normally.</p>
   </div>
</body>
</html

Answer 2

我找到了一个很好的解决方案，适用于Chrome和Safari：

button {
    height: 34px;
    line-height: 18px;
    font-weight: 700;
    font-size: 14px;
    position: absolute;
    bottom: 60px;
    animation-name: shiny;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: -300px -300px;
    background-image: -webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.4) 49%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.4) 51%,
            rgba(255, 255, 255, 0.0) 55%,
            rgba(255, 255, 255, 0.0) 100%
    );
}

@keyframes shiny{
    100% {
        background-repeat: no-repeat;
        background-position: 300px 300px;
    }
}

Css动画关键帧无法在Safari 11上运行

2 个答案: