animation-iteration-count always add one more

I have simple but annoyed problem with animation-iteration-count. In my app i use animate.css and reactjs I want to add class animated flash to my element, when i set animation-iteration-count: 0 this work as i expected. I have a problem when i set 1 or more each time this multiply my animation count. For example when i set animation-iteration-count: 4 this gives me 8 times animation.

My Site component:

@Site = React.createClass
  getInitialState: ->
    articles: @props.site.articles
  getDefaultState: ->
    articles: []
  shouldComponentUpdate: ->
    $('.articles_wrapper').addClass 'animated flash'
  allSite: ->
    @props.all_site.map (site) =>
      [site.id, site.name]
  changeSite: (site) ->
    #Load site articles from server
    $.ajax
      method: 'GET'
      url: "sites/" + site
      dataType: 'JSON'
      data: site
      success: (data) =>
      #Displat new articles
        @setState articles: data.articles 
  position: (article) ->
    position = @state.articles.indexOf(article) + 1;
  render: ->
    React.DOM.div
      className: 'site_wrapper'
      React.createElement SiteForm, options: @allSite(), siteName: @props.site.name, handleChangeSite: @changeSite    
      React.DOM.div
        className: 'row articles_wrapper'
        id: 'site' + @props.site.id
        for article in @state.articles
          React.createElement Article, key: article.id, article: article, position: @position(article)

My css

.flash {
  -moz-animation-iteration-count:1;
  -moz-animation-delay: 0;
  -moz-animation-duration: 1.5s;
  -moz-animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

I have been fighting with this since yesterday evening, so any help will be awesome.

via Chebli Mohamed