CSS过渡：淡化背景颜色，之后重置 [英] CSS transition: fade background color, resetting after

问题描述

我有一个div列表，并允许我的用户通过发布新内容来动态添加一个新列表。如果用户发布了新内容，我想通过将新div的背景色渐变为另一种颜色，然后再将其褪色在屏幕上突出显示。我非常接近：

I have a list of divs and allow my user to add a new one dynamically by posting new content. If the user posts new content, I'd like to highlight it on the screen by fading the background color of the new div to another color, and fading it back. I'm pretty close:

http：// jsfiddle .net / pUeue / 1953 /

我正在使用此CSS触发转换：

I'm using this CSS to trigger the transition:

.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类之外。

I can fade to the other color, but it does not fade back. I'm wondering if anyone has a suggestion to accomplish this? I realize there's lots of ways to do this, but I was hoping to contain this entirely in the CSS (except for adding the CSS class dynamically, via jQuery.

感谢任何建议...

推荐答案

您可以使用动画关键帧。不需要其他JavaScript。

You could make use of animation keyframes. No additional javascript needed.

$('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" />

这篇关于CSS过渡：淡化背景颜色，之后重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！