Html CSS 过渡：淡化背景颜色，之后重置

CSS transition: fade background color, resetting after

提问by BenjiFB

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:

我有一个 div 列表，并允许我的用户通过发布新内容来动态添加一个新的 div。如果用户发布新内容，我想通过将新 div 的背景颜色淡化为另一种颜色并将其淡入淡出来在屏幕上突出显示它。我很接近：

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

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

I'm using this CSS to trigger the transition:

我正在使用这个 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;
 }

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.

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

Thanks for any suggestions...

感谢您的任何建议...

回答by Larz

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

您可以使用动画关键帧。不需要额外的 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" />

回答by cport1

Hmmm.. If you wanted to keep it in css you could add a setTimeout inside your click event and then add another class.

嗯.. 如果你想把它保留在 css 中，你可以在你的点击事件中添加一个 setTimeout ，然后添加另一个类。

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

CSS::

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;
}
.nextBackgroundAnimated{
        background-color: white !important;
        background-image:none !important;
}

http://jsfiddle.net/pUeue/1954/

http://jsfiddle.net/pUeue/1954/

回答by Koray

If you can use jquery-ui this might help:

如果您可以使用 jquery-ui，这可能会有所帮助：

$('input[type=button]').click( function() { 
  var animTime = 1000;
 $('#newContent').addClass('pulse', animTime).removeClass('pulse', animTime);
});

.pulse{
        background-color: #AD310B;     
}

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
     type="text/javascript" charset="utf-8"></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" />