title: CSS glow animation keyframes work on Chrome but not iOS Safari
body: <p>Any idea why this works in Chrome but not Safari?</p>
  
  <p><a href="http://jsfiddle.net/tTxMV/" rel="noreferrer">http://jsfiddle.net/tTxMV/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>@-webkit-keyframes glow {
      0% {
          opacity: 0;
      }
      50% {
          opacity: 1;
      }
      100% {
          opacity: 0;
      }
  }
  .glow:after {
      -webkit-animation-name:             glow;
      -webkit-animation-duration:         1s;
      -webkit-animation-iteration-count:  infinite;
      -webkit-animation-timing-function:  ease-in-out;
      background: rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.5);
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      content: "";
      border-radius: 3px;
      opacity: 0;
  }
  
  #btn {
      background: red;
      text-align: center;
      font-size: 100px;
      color: white;
      line-height: 100px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="btn" class="glow"&gt;
      Start
  &lt;/div&gt;
  </code></pre>