css - CSS グロー アニメーション キーフレームは Chrome では機能するが、iOS Safari では機能しない

Question

これがChromeでは機能するのにSafariでは機能しない理由は何ですか?

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 は疑似クラスのアニメーションをサポートしていません。

このバグは 2013 年 1 月 2 日に Webkit で修正された ( http://trac.webkit.org/changeset/138632 ) ため、これは iOS 7 以降で動作すると予想されます。

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