如何防止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關鍵幀動畫閃爍？

回答

相關問題