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

前端之家收集整理的这篇文章主要介绍了html – CSS转换:淡化背景颜色,重置后前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div列表,并允许我的用户通过发布新的内容动态添加一个新的。如果用户发布新内容,我想通过将新div的背景颜色淡化为另一种颜色,并将其淡出,从而在屏幕上突出显示。我很亲近

http://jsfiddle.net/pUeue/1953/

我正在使用这个CSS来触发转换:

  1. .backgroundAnimated{
  2. background-color: #AD310B !important;
  3. background-image:none !important;
  4. -webkit-transition: background-color 5000ms linear;
  5. -moz-transition: background-color 5000ms linear;
  6. -o-transition: background-color 5000ms linear;
  7. -ms-transition: background-color 5000ms linear;
  8. transition: background-color 5000ms linear;
  9. -webkit-animation-direction: alternate; /* Chrome,Safari,Opera */
  10. animation-direction: alternate;
  11.  
  12. -webkit-animation-iteration-count: 2; /* Chrome,Opera */
  13. animation-iteration-count: 2;
  14. }

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

感谢任何建议…

解决方法

您可以使用动画关键帧。不需要额外的JavaScript。
  1. $('input[type=button]').click( function() {
  2. $('#newContent').addClass('backgroundAnimated');
  3. });
  1. @-webkit-keyframes fadeIt {
  2. 0% { background-color: #FFFFFF; }
  3. 50% { background-color: #AD301B; }
  4. 100% { background-color: #FFFFFF; }
  5. }
  6. @-moz-keyframes fadeIt {
  7. 0% { background-color: #FFFFFF; }
  8. 50% { background-color: #AD301B; }
  9. 100% { background-color: #FFFFFF; }
  10. }
  11. @-o-keyframes fadeIt {
  12. 0% { background-color: #FFFFFF; }
  13. 50% { background-color: #AD301B; }
  14. 100% { background-color: #FFFFFF; }
  15. }
  16. @keyframes fadeIt {
  17. 0% { background-color: #FFFFFF; }
  18. 50% { background-color: #AD301B; }
  19. 100% { background-color: #FFFFFF; }
  20. }
  21.  
  22. .backgroundAnimated{
  23. background-image:none !important;
  24. -webkit-animation: fadeIt 5s ease-in-out;
  25. -moz-animation: fadeIt 5s ease-in-out;
  26. -o-animation: fadeIt 5s ease-in-out;
  27. animation: fadeIt 5s ease-in-out;
  28. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <div>Old stuff</div>
  3. <div>Old stuff</div>
  4. <div>Old stuff</div>
  5. <div id="newContent">New stuff,just added</div>
  6.  
  7. <input type="button" value="test" />

猜你在找的HTML相关文章