CSS glow animasyon anahtar kareleri Chrome'da çalışır, ancak iOS Safari'de değil

Question

Bunun neden Chrome'da değil Safari'de çalıştığı hakkında bir fikriniz var mı?

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

Eh, iOS sözde elemanları üzerinde animasyonları desteklemediği gerçekten değil, öyle WebKit gelen daha bir hata oldu. solved it in January ve Chrome'un hızlı güncellemeleri nedeniyle Chrome'da şu anda çalışıyor, ancak Safari'de değil, mobil cihaz veya masaüstü sürümü de değil.

Söz konusu öğenin yerine yalnızca tüm öğe (#btn) üzerinde animasyon çalışması yapın.

.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 sözde sınıfları üzerinde animasyonları desteklemez.

Hata, Webkit'te 2 Ocak 2013'te (http://trac.webkit.org/changeset/138632) düzeltildi, dolayısıyla bunun iOS 7 ve üzerinde çalışmasını bekleyebiliriz.

Şimdilik, öğeyi animasyon üzerinde doğrudan kullanamazsınız (yani .glow için .glow:after takas ve opaklık yerine rgba animasyonu olarak değiştirin)?