我一直试图通过以下代码更改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" );
它在Chrome和Firefox中都有效（使用-moz-animation-duration），但在Safari中却没有，即使我有-webkit-前缀。
谢谢 ：）
请试试这段代码
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>