我有一个 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;
}
}
最佳答案
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
关于Css 动画关键帧不适用于 Safari 11，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48097881/