CSS animation keyframes work in Chrome, but not in iOS Safari

Question

Any idea why this works in Chrome but not in 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 that iOS does not support animation on pseudo-elements, but was more than a bug in WebKit. They decided it in January , and due to quick updates to Chrome, it now works in Chrome, but not so on Safari, neither in the mobile nor the desktop version.

Make only the animation for the whole 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 does not support animation in pseudo-classes.

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

At the moment, you cannot use the animation directly in the element (i.e. swap .glow:after for .glow ) and change it as an rgba animation, not opacity)?