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/

Have you tried not using setProperty, but assigning the value directly via el.style.webkitAnimationDelay = "5s"? (Replace with appropriate vendor prefix where necessary.) — C3roe
– C3roe, Commented Jan 11, 2016 at 13:44
Yep, doesn't seem to update when using the actual name there instead of setProperty. — Jimbo
– Jimbo, Commented Jan 11, 2016 at 13:50
You need to include the appropriate vendor prefix in the property name. box.style.webkitAnimationDelay = "200s"; jsfiddle.net/swakq13a/6 — C3roe
– C3roe, Commented Jan 11, 2016 at 14:07
Looks like a bug specific to Safari then. // Do you need to set animation-delay values that are unknown beforehand, or a lot of different values? Otherwise the simple workaround might be to not set this value via JS, but only change/add to the element’s class via JS, and then have your stylesheet take care of formatting the element with different delays based on the class. — C3roe
– C3roe, Commented Jan 11, 2016 at 14:15
Bug-wise, I can't find anything out there describing similar issues. I was thinking about something like your suggestion... animation.duration + "s " + animation.timingFunction + " " + animation.delay + "s " + animation.iterationCount + " " + animation.direction + " " + animation.fillMode + " " + animation.playState + " " + animation.name;. — Jimbo
– Jimbo, Commented Jan 11, 2016 at 14:22

Donald Duck is with Ukraine · Accepted Answer · 2017-01-02 19:51:04Z

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);

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related