Setting animation-delay in Safari overwrites animation property, but not in Chrome

Question

Note, I am using the latest Safari (9.0.2) and the latest Chrome. I know that as of 9.0.x safari handles a lot more of the animation prefixes for you. Yay! Also, I've submitted a bug report.

At it's most simplest, I'm trying to set the animation-delay only using JavaScript for a CSS Keyframe animation. The code is as follows:

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

Now in Chrome, this updates the animation-delay property as I expect only. The animation property is left untouched, which is what I want:

In Safari, however, this overwrites the animation property, which for my purposes is not okay:

Obviously that's not even a valid animation value. I basically want this working in Safari without overriding the animation property. Is there an alternative method to achieve this?

The idea from the CSS / HTML room was to add the class to the CSS and then just toggle it with classList.toggle, however this animation delay property will be dynamic and repeatedly changed. These values are NOT known beforehand.

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

Answer 1

EDIT - I just saw that this question was a year old. This answer should help anyone Googling for this exact issue, apologies if it is a year too late for you, Jimbo.

I was able to resolve the issue in Safari (while keeping everything functional) by just resetting the entire animation property with shorthand. This might not be 100% ideal, but it does circumvent the Safari bug without creating any animation issues that I can see.

Here is an example JS Fiddle showing it with a variable value: https://jsfiddle.net/andrewborem/5rb5ybe3/1/

NOTE - I removed the "important" argument on setProperty since it is no longer necessary. Additionally, I removed the animation-delay property from the 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);