如何防止Safari css关键帧动画闪烁?
我尝试了各种方法,从添加额外的关键帧(0%、1%、100%或0%、99%、100%)到将-webkit动画填充模式设置为转发到经常提到的-webkit背面可见性:隐藏;其他线程中提到了这个技巧,但在Safari 7(桌面和iOS)中几乎每次动画迭代开始时,我仍然看到css关键帧动画中的闪烁。Chrome似乎不闪烁 JSBin: HTML:如何防止Safari css关键帧动画闪烁?,css,safari,css-animations,Css,Safari,Css Animations,我尝试了各种方法,从添加额外的关键帧(0%、1%、100%或0%、99%、100%)到将-webkit动画填充模式设置为转发到经常提到的-webkit背面可见性:隐藏;其他线程中提到了这个技巧,但在Safari 7(桌面和iOS)中几乎每次动画迭代开始时,我仍然看到css关键帧动画中的闪烁。Chrome似乎不闪烁 JSBin: HTML: <div class="ripple"></div> body { background-color: #90CBEA; }
<div class="ripple"></div>
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
&:after {
-webkit-animation-name: outerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
}
@-webkit-keyframes innerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 200px;
width: 200px;
opacity: 0;
}
}
@-webkit-keyframes ripple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 300px;
width: 300px;
opacity: 0;
}
}
@-webkit-keyframes outerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 340px;
width: 340px;
opacity: 0;
}
}
在两者之间添加一个比99%稍早的帧,使得闪烁在Safari上消失!(Safari 8 OS X)
@-webkit-keyframes innerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 200px; width: 200px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
@-webkit-keyframes ripple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 300px; width: 300px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
@-webkit-keyframes outerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 340px; width: 340px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}