如何防止Safari CSS关键帧动画闪烁？ [英] How do I prevent Safari css keyframe animation flicker?

问题描述

我已尝试通过添加额外的关键帧（0％，1％，100％或0％，99％，100％）到设置-webkit-animation-fill-mode来转发tot- -backface-visibility：hidden;在其他线程中提到的伎俩，但我仍然看到我的CSS关键帧动画在几乎每个动画迭代开始的Safari 7（桌面和iOS）闪烁。 Chrome似乎无闪烁。

I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free.

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

推荐答案

一个框架之间有点早在99％使Safari闪烁消失了！ （Safari 8 OS X）

Adding a frame in between a little earlier than at 99% made the flickering disappear on 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; }
}

这篇关于如何防止Safari CSS关键帧动画闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！