html – CSS转换：淡化背景颜色,重置后

概述我有一个div列表，并允许我的用户通过发布新的内容动态添加一个新的。如果用户发布新内容，我想通过将新div的背景颜色淡化为另一种颜色，并将其淡出，从而在屏幕上突出显示。我很亲近 http://jsfiddle.net/pUeue/1953/ 我正在使用这个CSS来触发转换： .backgroundAnimated{ background-color: #AD310B !important; 我有一个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,Opera */    animation-iteration-count: 2; }

我可以褪色到另一种颜色，但它不会退色。我想知道有没有人有建议来完成这个？我意识到有很多方法可以做到这一点，但我希望将其完全包含在CSS中(除了通过jquery动态添加CSS类外。

感谢任何建议…

解决方法 您可以使用动画关键帧。不需要额外的JavaScript。

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

@-webkit-keyframes fadeIt {  0%   { background-color: #FFFFFF; }  50%  { background-color: #AD301B; }  100% { background-color: #FFFFFF; }}@-moz-keyframes fadeIt {  0%   { background-color: #FFFFFF; }  50%  { background-color: #AD301B; }  100% { background-color: #FFFFFF; }}@-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;    -webkit-animation: fadeIt 5s ease-in-out;        -moz-animation: fadeIt 5s ease-in-out;          -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转换：淡化背景颜色,重置后全部内容，希望文章能够帮你解决html – CSS转换：淡化背景颜色,重置后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。