CSSグローアニメーションキーフレームは、Chromeで動作しますが、ないのiOSのSafari

Question

これはSafariのChromeでなく、働く理由を任意のアイデア？

http://jsfiddle.net/tTxMV/

CSS：

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

HTML：

<div id="btn" class="glow"> 
    Start 
</div> 

Answer 1

まあ、それはiOSのは、擬似要素にアニメーションをサポートしていない、それはのWebKitからより多くのバグだったことを本当にではありません。それらはsolved it in Januaryであり、Chromeの高速アップデートのためChromeで動作しますが、Safariでは動作しません。モバイルバージョンでもデスクトップバージョンでもありません。

ではなく、疑似要素の全体要素（#btn）上だけでアニメーション作品を作ります。

.glow:after { 
    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; 
} 

#btn { 
    -webkit-animation-name:    glow; 
    -webkit-animation-duration:   1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    background: red; 
    text-align: center; 
    font-size: 100px; 
    color: white; 
    line-height: 100px; 
    opacity: 0; 
} 

http://jsfiddle.net/tTxMV/2/

Answer 2

のiOSは、擬似クラスのアニメーションをサポートしていません。

バグが1月2日2013（http://trac.webkit.org/changeset/138632）上のWebkitに固定されたので、私たちは、これは上のiOS 7で動作するように期待するかもしれません。

今のところ、要素のアニメーションを直接使用することはできません（つまり、.glowの.glow:afterを交換し、不透明ではなくrgbaアニメーションに変更します）。