Html CSS转换：淡入背景色，之后重置

我有一个div列表，允许我的用户通过发布新内容动态添加一个新div。如果用户发布了新内容，我希望通过将新div的背景色淡入另一种颜色，然后淡出，在屏幕上突出显示它。我很接近：

我使用这个CSS来触发转换：

.backgroundAnimated{
    background-color: #AD310B !important;
    background-image:none !important;
   -webkit-transition: background-color 5000ms linear;
   -moz-transition: background-color 5000ms linear;
   -o-transition: background-color 5000ms linear;
   -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
 }

我可以淡入另一种颜色，但它不会退色。我想知道是否有人有一个建议来实现这一点？我意识到有很多方法可以做到这一点，但我希望将其完全包含在CSS中（除了通过jQuery动态添加CSS类）

---

感谢您的建议…

Hmmm

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
    setTimeout(function(){
        $('#newContent').addClass('nextBackgroundAnimated');
    }, 5000);
});

CSS:：

---

您可以使用动画关键帧。无需额外的javascript

$（'input[type=button]'）。单击（function（）{
$（'#newContent'）.addClass（'backgroundAnimated'）；
})；

@-o-关键帧fadeIt{
0%{背景色：#FFFFFF；}
50%{背景色：#AD301B；}
100%{背景色：#FFFFFF；}
}
@关键帧fadeIt{
0%{背景色：#FFFFFF；}
50%{背景色：#AD301B；}
100%{背景色：#FFFFFF；}
}
.背景{
背景图像：无！重要；
-o-动画：fadeIt 5s缓进缓出；
动画：fadeIt 5s缓进缓出；
}

老东西
老东西
老东西
新东西，刚刚添加

如果您可以使用jquery ui，这可能会有所帮助：

$（'input[type=button]'）。单击（function（）{
时间=1000；
$（'newContent'）.addClass（'pulse'，animTime.）.removeClass（'pulse'，animTime）；
})；

.pulse{
背景色：#AD310B；
}

老东西
老东西
老东西
新东西，刚刚添加

ah-这很巧妙。我更喜欢你的答案；）效果很好！谢谢是否有一种简单的方法可以再次运行动画？@althaus是的，只需将动画迭代计数属性设置为希望其运行的次数，或者设置为无限（如果希望继续）。这只是CSS转换本身的一个演示——因为这是原始问题（在页面顶部）所要求的。如果你指的是@althaus问题——我按自己的理解回答了。如果您问为什么单击“test”按钮不会重新运行动画，这是因为需要额外的javascript从元素中删除“backgroundAnimated”类，然后再将其添加回来。但这超出了原始问题的范围，它与jquery有关——而不是CSS@raspacorp

.backgroundAnimated{
        background-color: #AD310B !important;
        background-image:none !important;
    -webkit-transition: background-color 5000ms linear;
    -moz-transition: background-color 5000ms linear;
    -o-transition: background-color 5000ms linear;
    -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
        -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

        -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
}
.nextBackgroundAnimated{
        background-color: white !important;
        background-image:none !important;
}