title: How do I prevent Safari css keyframe animation flicker?
body: <p>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.</p>
  
  <p>JSBin: <a href="http://jsbin.com/julor/2/edit" rel="nofollow">http://jsbin.com/julor/2/edit</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="ripple"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
  
    &amp;:before {
      -webkit-animation-name: ripple;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    }
  
    &amp;: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;
    }
  }
  </code></pre>