我有一个 div 列表,并允许我的用户通过发布新内容动态添加一个新的 div。如果用户发布新内容,我想通过将新 div 的背景颜色淡化为另一种颜色并淡化回来,在屏幕上突出显示它。我很接近:
http://jsfiddle.net/pUeue/1953/
我正在使用这个 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 类之外。
感谢您的任何建议...
最佳答案
您可以使用动画关键帧。无需额外的 javascript。
$('input[type=button]').click( function() {
$('#newContent').addClass('backgroundAnimated');
});
@-o-keyframes fadeIt {
0% { background-color: #FFFFFF; }
50% { background-color: #AD301B; }
100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
0% { background-color: #FFFFFF; }
50% { background-color: #AD301B; }
100% { background-color: #FFFFFF; }
}
.backgroundAnimated{
background-image:none !important;
-o-animation: fadeIt 5s ease-in-out;
animation: fadeIt 5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>
<input type="button" value="test" />
关于html - CSS 转换 : fade background color, 重置后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26936811/