javascript - Setting CSS Animation Iteration Count using jQuery -

i created plugin called bootstrap notify. recommend using animate.css control animations of notifications. reported issue glyphicons pro notification repeat animate enter , exit animations animate.css. brought attention cause of issue because both animate.css , glyphicons pro use similar class called animated.

animate.css not set animation-iteration-count defaults 1 whereas glyphicons pro sets animation-iteration-count infinite.

i trying force plugin set animation-iteration-count 1 notification not repeat it's animation on , on again. using jquery set css of notification.

i tried use

var css = {          animationiterationcount: 1     } 

i have tried

var css = {          webkitanimationiterationcount : 1,         animationiterationcount: 1     } 

then later set notify css

$notify.css(css) 

but if inspect notification on website notice animation-iteration-count not set.

just figured out if set using javascript instead of jquery appears work fine.

for example following works:

$notify[0].style.webkitanimationiterationcount = 1; $notify[0].style.animationiterationcount = 1; 

so question is, can set animation-iteration-count using jquery , if can how set it?

jquery requires same exact name of css property. try this:

var css = {      'animation-iteration-count': 1 }  $notify.css(css) 

your best bet use separate css file override glyphicons pro rules, instead of using javascript.

.glyphicons.animate {     -webkit-animation-iteration-count: 1 !important;     animation-iteration-count: 1 !important; }