在Safari中设置动画延迟会覆盖动画属性，但不会覆盖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);