如何防止Safari css关键帧动画闪烁？

我试过一切从添加额外的关键帧（0％，1％，100％或0％，99％，100％）到设置-webkit-animation-fill-mode转发到经常提到的-webkit- backface-visibility：hidden;在其他线程中提到的技巧，但在Safari 7中几乎每个动画迭代开始时（即桌面和iOS），我仍然在CSS关键帧动画中看到闪烁。 Chrome似乎无闪烁。如何防止Safari css关键帧动画闪烁？

JSBin：http://jsbin.com/julor/2/edit

HTML：

<div class="ripple"></div>

CSS：

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; 
    } 
}

来源

2014-09-05 Matt M

添加帧早于99％有点之间进行闪烁消失苹果浏览器！（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; } 
}

来源

2015-05-10 12:11:42

如何防止Safari css关键帧动画闪烁？

回答

相关问题