I fotogrammi chiave di animazione bagliore CSS funzionano su Chrome ma non su iOS Safari

Qualche idea del perché funzioni in Chrome ma non in Safari?I fotogrammi chiave di animazione bagliore CSS funzionano su Chrome ma non su iOS 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>

fonte

2013-05-23 Garrett

Beh, è non davvero che iOS non supporta le animazioni su pseudo-elementi, è stato più un bug da WebKit. Sono solved it in January e grazie agli aggiornamenti rapidi di Chrome ora funziona con Chrome, ma non su Safari, né sulla versione mobile né su quella desktop.

Effettuare il lavoro di animazione sull'intero elemento (#btn) anziché sullo pseudoelemento.

.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/

fonte

2013-05-28 19:12:07 pzin

Grazie per la risposta, ma il punto del ': AFTER' pseudo-elemento è stato quello di aggiungere una 'maschera' bianca in modo che il bagliore dovrebbe funzionare su qualsiasi colore. Con questo, l'opacità del mio intero elemento viene abbassata, rendendola più opaca anziché luminosa. C'è un modo per me di farlo come una maschera bianca senza dover aggiungere un elemento davanti al pulsante? – Garrett

@Garrett Ho appena aggiornato il tuo violino, forse starai bene facendo qualcosa del genere: http://jsfiddle.net/tTxMV/4. Nessun elemento aggiuntivo su HTML, ma un po 'più di lavoro sul CSS. Senza aggiungere markup extra, penso che questo sarebbe il modo più semplice per ottenere ciò e lasciare che il tuo codice rimanga un po 'riutilizzabile, non del tutto come usare gli pseudo-elementi. A volte siamo costretti a lasciar vincere i browser: '( – pzin

Penso che questo sia il più vicino possibile con il bug di Safari. Grazie! – Garrett

iOS non supporta le animazioni su pseudo-classi.

Il bug è stato corretto in Webkit il 2 gennaio 2013 (http://trac.webkit.org/changeset/138632), quindi potremmo aspettarci che funzioni in iOS 7 e successivi.

Per ora, non è possibile utilizzare direttamente l'animazione sull'elemento (ad esempio, lo scambio .glow:after per .glow e modificarlo come animazione rgba anziché opacità)?

fonte

2013-05-28 19:08:05

I fotogrammi chiave di animazione bagliore CSS funzionano su Chrome ma non su iOS Safari

risposta

Problemi correlati