我有一个css关键帧背景动画在Chrome上工作但在Safari 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
我找到了一个很好的解决方案，适用于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;
}
}