jQuery $.css() function not interpreting “animatio

Question

Edited - linked the wrong codepen This only seems to happen in webkit browsers. In firefox it works as intened. In IE, the right inline-style is added but it doesn't add the prefix(even if I specify 'ms-animation-delay' in the javascript instead of just 'animation-delay'

I'm playing with a codepen trying to replicate some Google Material effects ( I know they have them in polymer, I just wanted to try to replicate some of the effects for fun). For some odd reason, jQuery is wrongly putting "animation: [value]" into the inline-styling instead of "animation-delay: [value]". Can anyone explain why and how to make a work around?

Here's the codepen: link

JS:

$(document).ready(function(){
  var lis = $("li"), str;

  for(var x=2; x<= lis.length; x++){
    str=(0.2+ 0.1*(x-2))+"s";
    lis.eq(x-1).css({"animation-delay": str});
  }
});

This also occurs with transition-delay.

Answer 1

Looks like FireFox allows you to update the animation via the sub-properties such as we can change the animation delay by just changing the property animation-delay. It's a pity that other browsers (Chrome, Opera, IE...) don't support that way of updating animation. That means to change the animation, you have to set the animation-name to a totally new name (new keyframes name). So if you just want to change the animation-delay, you may have to create 2 keyframes with different names (but they should have the same inner key rules, just different names). And then reapply the whole animation with the new name and the desired animation-delay like this:

//the current animation:
animation: display 5s infinite;
//the updated animation:
animation: display2 5s 1s infinite;

As you can see, the difference is in the name (display2 instead of display) and we added a delay of 1s. That way works in all browsers.

However I notice that you just want to apply the animation using script, so the simplest thing to do is just remove all the animation in the CSS code (just keep the keyframes) and apply the animation using script, that way you don't need to create the clone (display2) of display keyframes:

$(document).ready(function(){
 var lis = $("li"), str;
 for(var x=1; x<= lis.length; x++){
   str=(200+ 100*(x-1))+"ms";    
   lis.eq(x-1).css({"animation": "display 5s " + str + " infinite"});
 }
});

Updated Demo.

Answer 2

.attr('style','-webkit-animation-delay:'+str+';animation-delay:'+str);