javascript - 即使添加-webkit，CSS动画也无法在Safari Web浏览器中运行

我一直在尝试通过以下代码更改CSS动画的持续时间：

.button{
   -webkit-animation-name: effect;
   -webkit-animation-duration: 0.05s;
}

@keyframes effect {
   0% { opacity: 0.0;
   50% { opacity: 0.5; }
   100% { opacity: 1.0; }
}

和

 $('.button').css("-webkit-animation-duration",  "3s" );

即使我具有-webkit-前缀，它也可以在Chrome和Firefox中运行（通过使用-moz-animation-duration），但在Safari中则不能。

谢谢：）

最佳答案

请尝试此代码

button {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<p>Using negative values: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<button type="button">Go</button>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

关于javascript - 即使添加-webkit，CSS动画也无法在Safari Web浏览器中运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48021640/