Javascript 使用jQuery设置CSS动画迭代计数

我创建了一个名为的插件。我建议使用它来控制通知的动画。有人报告了通知将通过animate.css在何处重复动画输入和退出动画的问题。最近我注意到，这个问题的原因是Animate.css和Glyphicons Pro都使用了一个类似的类，名为

animated

Animate.css不设置

动画迭代计数

，因此它默认为

1

，而Glyphicons Pro将

动画迭代计数

设置为

无限

我试图强制我的插件将

动画迭代计数设置为
1
，这样通知就不会一次又一次地重复它的动画。我正在使用jQuery设置通知的css

我试着用

var css = { 
        animationIterationCount: 1
    }

我也试过了

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

然后我设置了通知css

$notify.css(css)

但是，如果我检查网站上的通知，我会注意到
动画迭代计数未设置

我刚刚发现，如果我使用JavaScript而不是jQuery设置它，它似乎工作得很好

例如，以下工作：

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

因此，我的问题是，您可以使用jQuery设置
动画迭代计数吗？如果可以，如何设置？
jQuery需要相同的css属性的确切名称。试试这个：

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

$notify.css(css)


最好使用单独的CSS文件来覆盖Glyphicons Pro规则，而不是使用javascript

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

css（）
方法支持OP POST代码中的属性camelcase表示法，因此我猜
webkitAnimationIterationCount:1，
相当于
“-webkit animation IterationCount”：1，
，但我不确定在这种特定情况下，因为供应商前缀刚刚尝试过它。该插件仍在添加
css
中的其他样式，如
显示
和
转换
，但它没有设置
动画迭代次数
我正试图阻止使用css文件，因为我的插件需要的规则数量有限。我的插件设计为使用bootstrap制作主题，我的自定义规则主要是放置和动画。@JimmyBoh@RobertE.McIntosh在设计样式时，你应该总是喜欢CSS解决方案。也就是说，您可以在HTML中使用样式元素。我不知道为什么它不能成为您的解决方案。您不能在Glyphicons Pro one？？？@a.Wolff之后加载animate.css文件。这并不重要，因为animate.css不设置
动画迭代计数，而是设置Glyphicons Pro。因此，即使在它之后添加animate.css，类
animated
仍将使用Glyphicons Pro中的
动画迭代计数
。您确定
$notify
返回任何匹配的元素吗？一旦元素添加到DOM中，您会调用它吗？也许，这是关于浏览器如何处理CSS动画的问题。在添加动画类之前，我会尝试将CSS属性设置为element