gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:12:49 24 4
gpt4 key购买 nike

我一直在尝试通过以下代码更改 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>

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com