Impostazione ritardo di animazione in Safari sovrascrive la proprietà di animazione, ma non in Chrome

Question

Nota, sto usando l'ultimo Safari (9.0.2) e l'ultimo Chrome. So che a partire dal 9.0.x safari gestisce molti più prefissi di animazione per te. Sìì! Inoltre, ho inviato una segnalazione di bug.

A è più semplice, sto cercando di impostare il animation-delaysolo utilizzando JavaScript per un'animazione CSS fotogramma chiave. Il codice è il seguente:

el.style.setProperty("-webkit-animation-delay", "5s", "important"); 

Ora in Chrome, questo aggiorna la proprietà animation-delay come mi aspetto solo. La proprietà animation è lasciato intatto, che è quello che voglio:

In Safari, tuttavia, questo sovrascrive la proprietà animation, che per i miei scopi, non va bene:

Ovviamente non è nemmeno un valore di animazione valido. Fondamentalmente voglio farlo funzionare in Safari senza sovrascrivere la proprietà animation. C'è un metodo alternativo per raggiungere questo obiettivo?

L'idea dalla stanza CSS/HTML era quella di aggiungere la classe al CSS e quindi basta attivarla con classList.toggle, tuttavia questa proprietà di ritardo dell'animazione sarà dinamica e cambiata più volte. Questi valori NON sono noti in anticipo.

JSFiddle: https://jsfiddle.net/swakq13a/3/

Answer 1

EDIT - Ho appena visto che la questione è stato un anno di età. Questa risposta dovrebbe aiutare chiunque a cercare su Google per questo problema esatto, scuse se è un anno troppo tardi per te, Jimbo.

Sono stato in grado di risolvere il problema in Safari (mantenendo tutto funzionale) semplicemente reimpostando l'intera proprietà dell'animazione con la stenografia. Questo potrebbe non essere ideale al 100%, ma elude il bug di Safari senza creare alcun problema di animazione che riesco a vedere.

Ecco un esempio JS Fiddle mostrando con un valore variabile: https://jsfiddle.net/andrewborem/5rb5ybe3/1/

NOTA - ho tolto l'argomento "importante" sul setProperty dal momento che non è più necessario. Inoltre, ho rimosso la proprietà animation-delay dal CSS.

setTimeout(function() { 
    var box = document.querySelector('#box'); 
    var variableDelay = "5s"; 
    box.style.setProperty("animation", "cycle-wide 2s " + variableDelay + " ease-in-out infinite both"); 
    alert(box.style.animation); 
}, 1000);