CSS glow animation keyframes work on Chrome but not iOS Safari

Question

Any idea why this works in Chrome but not 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

Well, it's not really that iOS doesn't support animations on pseudo-elements, it was more a bug from WebKit. They solved it in January and because of Chrome's fast updates it works in Chrome now, but not so on Safari, neither mobile nor desktop version.

Make just the animation work on the entire element (#btn) instead of the pseudo-element.

.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 doesn't support animations on pseudo-classes.

The bug was fixed in Webkit on January 2nd 2013 (http://trac.webkit.org/changeset/138632), so we might expect this to work in iOS 7 and on.

For now, can you not use the animation on the element directly (i.e. swap .glow:after for .glow, and change it to be an rgba animation rather than opacity)?