Setting CSS Animation Iteration Count using jQuery

Question

I created a plugin called Bootstrap Notify. Which I recommend using Animate.css to control the animations of the notifications. Someone reported an issue with Glyphicons Pro where the notification would repeat the animate enter and exit animations by Animate.css. It was recently brought to my attention that the cause of this issue is because both Animate.css and Glyphicons Pro use a similar class called animated.

Animate.css does not set animation-iteration-count so it defaults to 1 whereas Glyphicons Pro sets animation-iteration-count to infinite.

I am trying to force my plugin to set animation-iteration-count to 1 so that the notification will not repeat it's animation over and over again. I am using jQuery to set the css of the notification.

I tried to use

var css = { 
        animationIterationCount: 1
    }

I have also tried

var css = { 
        WebkitAnimationIterationCount : 1,
        animationIterationCount: 1
    }

then later I set the notify css

$notify.css(css)

But if I inspect the notification on the website I notice that the animation-iteration-count is not set.

Just figured out that if I set it using JavaScript instead of jQuery it appears to work just fine.

For example the following works:

$notify[0].style.WebkitAnimationIterationCount = 1;
$notify[0].style.animationIterationCount = 1;

So my question is, Can you set animation-iteration-count using jQuery and if you can how do you set it?

Cannot you just load animate.css file **after** Glyphicons Pro one??? — A. Wolff, Apr 29 '15 at 13:15
@A.Wolff this ownt matter because animate.css does not set `animation-iteration-count` but Glyphicons Pro. So even if you were to add animate.css after it, the class `animated` would still use `animation-iteration-count` from Glyphicons Pro. — Robert E. McIntosh, Apr 29 '15 at 13:19
Are you sure `$notify` returns any matched element? Do you call it once element added to the DOM? Maybe, this is issue regarding how browser handles CSS animation. I'd try to set CSS property to element before adding class animated — A. Wolff, Apr 29 '15 at 13:28

score 3 · Answer 1 · edited Apr 29 '15 at 13:26

3

~~jQuery requires the same exact name of the css property. Try with this:~~

var css = { 
    'animation-iteration-count': 1
}

$notify.css(css)

Your best bet is to use a separate CSS file to override the Glyphicons Pro rules, instead of using javascript.

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

edited Apr 29 '15 at 13:26

Robert E. McIntosh

5,557
4
26
35

answered Apr 29 '15 at 13:10

Jim Buck

2,383
23
42

1

`css()` method support property camelcase notation as in OP posted code, so i guess `webkitAnimationIterationCount: 1,` is equivalent to `'-webkit-animation-iteration-count': 1,` but i'm not sure in this specific case though because of vendor prefix – A. Wolff Apr 29 '15 at 13:13
Just tried it. The plugin is still adding the other styles off the `css` such as `display` and `transition` but it is not setting `animation-iteration-count` – Robert E. McIntosh Apr 29 '15 at 13:14
I am trying to prevent the use of a css file since there is a limited number of rules that my plugin requires. My plugin was designed to use bootstrap for theming and my custom rules are mostly of placement and animation. – Robert E. McIntosh Apr 29 '15 at 13:17
1

@JimmyBoh [the unprefixed rule must always be the last one](http://stackoverflow.com/a/12531574/1654265) – Andrea Ligios Apr 29 '15 at 13:22
@JimmyBoh I would really like a jQuery or JavaScript solution. If I am unable to find one I will use a separate css file. It is hard for me to justify users to use a sperate file for 4 lines of css. – Robert E. McIntosh Apr 29 '15 at 13:23
Ideally it would go in your own placement/animation stylesheet, which traditionally is always after other 3rd party stylesheets. Additionally, the number of files won't matter if you bundle and minify your resources appropriately. – Jim Buck Apr 29 '15 at 13:25
1

@RobertE.McIntosh You should always prefer a CSS solution when it comes to styling purpose. That's said, you can use a STYLE element in your HTML. I'm not sure why it couldn't be a solution for you – A. Wolff Apr 29 '15 at 13:25
@A.Wolff, I am not saying that it isn't a solution for me. It will solve the problem. I would personally prefer to not require a css file for 4 lines of css is all. I could always use jQuery to inject a `style` tag into the head of the document. – Robert E. McIntosh Apr 29 '15 at 13:30
@RobertE.McIntosh Do you bundle your stylesheets at all? Separate of CSS files should only be done for ease of development, not actual consumption. .NET Bundles, Grunt, Gulp, Compass; the list of tools to do this go on and on. – Jim Buck Apr 29 '15 at 14:18
@JimmyBoh I do not bundle any stylesheets with this plugin because it uses stylesheets from other resources such as bootstrap and animate.css. I only make small changes to the css to support certain features. If I was to create a separate stylesheet it may consist of about 10 lines. – Robert E. McIntosh Apr 29 '15 at 15:15

Setting CSS Animation Iteration Count using jQuery

1 Answers1