title: Setting CSS Animation Iteration Count using jQuery
body: <p>I created a plugin called <a href="http://bootstrap-growl.remabledesigns.com/" rel="nofollow">Bootstrap Notify</a>. Which I recommend using <a href="http://daneden.github.io/animate.css/" rel="nofollow">Animate.css</a> to control the animations of the notifications. Someone reported an issue with <a href="http://glyphicons.com/" rel="nofollow">Glyphicons Pro</a> 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 <code>animated</code>.</p>
  
  <p>Animate.css does not set <code>animation-iteration-count</code> so it defaults to <code>1</code> whereas Glyphicons Pro sets <code>animation-iteration-count</code> to <code>infinite</code>.</p>
  
  <p>I am trying to force my plugin to set <code>animation-iteration-count</code> to <code>1</code> 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.</p>
  
  <p>I tried to use</p>
  
  <pre><code>var css = { 
          animationIterationCount: 1
      }
  </code></pre>
  
  <p>I have also tried</p>
  
  <pre><code>var css = { 
          WebkitAnimationIterationCount : 1,
          animationIterationCount: 1
      }
  </code></pre>
  
  <p>then later I set the notify css</p>
  
  <pre><code>$notify.css(css)
  </code></pre>
  
  <p>But if I inspect the notification on the website I notice that the <code>animation-iteration-count</code> is not set.</p>
  
  <p>Just figured out that if I set it using JavaScript instead of jQuery it appears to work just fine.</p>
  
  <p>For example the following works:</p>
  
  <pre><code>$notify[0].style.WebkitAnimationIterationCount = 1;
  $notify[0].style.animationIterationCount = 1;
  </code></pre>
  
  <p>So my question is, Can you set <code>animation-iteration-count</code> using jQuery and if you can how do you set it?</p>