Przejście CSS: zanikanie koloru tła, resetowanie po

Question

Mam listę elementów div i zezwalam mojemu użytkownikowi na dynamiczne dodawanie nowego przez umieszczanie nowej treści. Jeśli użytkownik opublikuje nową zawartość, chciałbym ją podświetlić na ekranie, zmniejszając kolor tła nowego elementu div do innego koloru i zmniejszając go. Jestem całkiem blisko:

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

Używam tego CSS do wyzwalania przejścia:

.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; 
} 

mogę zanikać w innym kolorze, ale nie znikną z powrotem. Zastanawiam się, czy ktoś ma sugestię, aby to osiągnąć? Zdaję sobie sprawę, istnieje wiele sposobów, aby to zrobić, ale miałem nadzieję, że zawiera to całkowicie w CSS (z wyjątkiem dodanie klasy CSS dynamicznie za pośrednictwem jQuery.

Dzięki za wszelkie sugestie ...

Answer 1

Można użyć klatek kluczowych animacji. Nie jest potrzebne dodatkowe 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" />

Answer 2

Hmmm. . Jeśli chcesz zachować go w CSS można dodać setTimeout wewnątrz zdarzenia click, a następnie dodać kolejną klasę.

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