Chuyển tiếp CSS: màu nền mờ dần, đặt lại sau

Question

Tôi có danh sách các div và cho phép người dùng của tôi thêm một số mới theo cách động bằng cách đăng nội dung mới. Nếu người dùng đăng nội dung mới, tôi muốn làm nổi bật nó trên màn hình bằng cách làm mờ màu nền của div mới thành màu khác và làm mờ nó trở lại. Tôi khá chặt chẽ:

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

Tôi đang sử dụng CSS này để kích hoạt quá trình chuyển đổi:

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

tôi có thể mờ dần sang màu khác, nhưng nó không phai trở lại. Tôi tự hỏi nếu có ai có một gợi ý để thực hiện điều này? Tôi nhận ra có rất nhiều cách để làm điều này, nhưng tôi đã hy vọng để chứa này hoàn toàn bằng CSS (trừ thêm các lớp CSS động, thông qua jQuery.

Thanks cho bất kỳ lời đề nghị ...

Answer 1

Bạn có thể sử dụng khung hình ảnh động. Không cần thêm 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. . Nếu bạn muốn giữ nó trong css bạn có thể thêm một setTimeout bên trong sự kiện click của bạn và sau đó thêm một lớp khác.

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