Переход CSS: изменение цвета фона, сброс после

У меня есть список 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, Safari, Opera */
    animation-iteration-count: 2;
 }

Я могу исчезать другим цветом, но он не исчезает. Мне интересно, есть ли у кого-нибудь предложение сделать это? Я понимаю, что есть много способов сделать это, но я надеялся полностью скрыть это в CSS (за исключением добавления класса CSS динамически через jQuery.

Спасибо за любые предложения...

Ответ 1

Вы можете использовать анимационные ключевые кадры. Никакого дополнительного 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" />

Ответ 2

Hmmm.. Если вы хотите сохранить его в css, вы можете добавить setTimeout внутри своего события click, а затем добавить еще один класс.

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

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/

Ответ 3

Если вы можете использовать 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" />