我有一个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" />