Javascript 使用jquery和css如何创建延迟的背景颜色更改动画？

我有一个javascript支持的可搜索html列表。当用户键入一些文本将列表细化为一个结果时，我希望.opaqueblock div背景变成更亮的颜色，然后在快速延迟后返回到原始颜色。目前，当用户在搜索框中键入文本53时，颜色会平滑地变亮，但我不知道如何将颜色更改回原来较暗的颜色。我想要一个明亮的闪光效果。另外，我尝试使用的仅更改孤立项文本53的背景色的each函数正在更改所有项的背景色。我不想更改隐藏的列表项的颜色。有人知道解决办法吗

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js""></script>
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>  <!--for search text-->
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'>  <!--for search text-->

<script>


function ListSearch() {

  var input, filter, ul, li, a, i, txtValue, resultsCount = 0, resultText = " results"; // Declare variables
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("DocumentList");
  li = ul.getElementsByTagName('li');
  $('.opaqueBlock').css('border-color','transparent') //remove all borders in case a border was added when the results were honed down to 1

  for (i = 0; i < li.length; i++) { // Loop through all list items, hide those that don't match query
    a = li[i].getElementsByTagName("div")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
      resultsCount++;
    } else {
      li[i].style.display = "none";  
    }
  }

    if (resultsCount == 1) {
        $('.opaqueBlock').css('border-color','#68e8d5');
        $('.PreviewArrow').css("opacity", "1"); document.getElementById("results_span").style.color = "#b6fbd2"; 
        resultText = " result"; 

        $(".opaqueBlock:visible").each(
            $('.opaqueBlock').delay(300).css("background-color", "rgba(147,185,212,0.6)")
            /* $('.opaqueBlock').delay(300).css("background-color", "rgba(72,97,115,0.6)"); */
        );

        }   

    else if(resultsCount < 1){document.getElementById("results_span").style.color = "#fbb6bc";}
    else if(resultsCount < 3){document.getElementById("results_span").style.color = "#b6fbd2";}
    else if(resultsCount < 4){document.getElementById("results_span").style.color = "#b6d7fb";}
    else if(resultsCount < 5){document.getElementById("results_span").style.color = "#eeb8ff";}
    else {document.getElementById("results_span").style.color = "#fbb6bc";}

    document.getElementById("results_span").innerHTML = resultsCount + resultText;  

}

$(document).ready(function(){

    function HoverOverItem(thisParticularItem, DocImageLink){
        if (!thisParticularItem.hasClass("active_form_item") ) {
            $(".PreviewContainer").css("opacity", "0.3");
            $(".PreviewContainer").css("background-image", DocImageLink);
            $(".PreviewContainer").animate({'opacity': '1'},500);
            $("#ContentContainer").find('.active_form_item').removeClass('active_form_item');
            thisParticularItem.addClass("active_form_item");
        }   
    }
});

$(window).load(function(){
    $("#myInput").focus();  

    var ul, li, resultsCount = 0, resultText = " searchable documents"; // Declare variables
    ul = document.getElementById("DocumentList");
    li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {resultsCount++;}   // Loop through all list items to get a count
    document.getElementById("results_span").innerHTML = resultsCount + resultText;  

});

</script>

<style>

#ContentContainer{
    height: 700px; 
    background-color: #132e54;
}
#ContentContainer a{text-decoration: none;}
#ContentContainer img{border: none;}


#search_prompt_div{margin-left: 16px;}
#search_prompt_div p{color: white; font-size: 14px; margin-bottom: 12px; font-family: comfortaa;}
#search_prompt_div input{height: 25px;font-size: 16px; width: 300px; font-family: comfortaa;}
#search_prompt_div #results_span{display: inline-block;margin-left: 6px; color: #fbb6bc; font-size: 12px;}

#DocumentListContainer{
    height: 600px;
    width: 660px;
    overflow: hidden;
}

#DocumentList{
    list-style-type: none;
    margin: 0;
    padding: 6px 0 0 0;
    width: 105%;
    overflow: auto;
    height: 893px;
}

.opaqueBlock{
    opacity: 1; /*can set this to 0 if you want to animate it*/
    margin-left: 56px; /*can set this to 0 if you want to animate it*/
    display: inline-block;
    width: 490px; 
    height: 35px; 
    border: 2px solid transparent;
    background-color: rgba(72,97,115,0.6);
    border-radius: 10px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
}

.opaqueBlock:hover{
    border: 2px solid #5cb1d8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
    opacity:0.7 !important;
}

.fileLinkContainer{ 
    width: 630px;
    height: 37px;
    margin-bottom: 10px;
    position: relative;
}

.fileTextSpan{
    margin-left: 10px; 
    color: white; 
    margin-top: 5px; 
    font-family: 'Nunito' !important; 
    font-size: 19px !important;
    display: inline-block;
}

</style>

<div id="ContentContainer">

    <br><br><br>

    <div id="search_prompt_div">
        <p>Type something in the search box to find what you are looking for:</p>  
        <input id="myInput" type="text" placeholder="Search..." onkeyup="ListSearch()">
        <span id="results_span"></span>
    </div>  

    <br/><br/><br/>

    <div class="PreviewContainer"></div>

    <div id="DocumentListContainer">
        <ul id="DocumentList">
            <li><div class="fileLinkContainer"><div class="opaqueBlock"><span class="fileTextSpan">Text 1</span></div></div></li>
            <li><div class="fileLinkContainer"><div class="opaqueBlock"><span class="fileTextSpan">Text 11</span></div></div></li>
            <li><div class="fileLinkContainer"><div class="opaqueBlock"><span class="fileTextSpan">Text 21</span></div></div></li>
            <li><div class="fileLinkContainer"><div class="opaqueBlock"><span class="fileTextSpan">Text 33</span></div></div></li>
            <li><div class="fileLinkContainer"><div class="opaqueBlock"><span class="fileTextSpan">Text 53</span></div></div></li>
        </ul>   
    </div>

</div>

---

我们如何使用CSS关键帧呢

@keyframes anim {
0% { background-color: #fff; }
50%, 70% { background-color: #333; }
100% { background-color: #fff; }
}

---

然后，只需通过JS在元素上切换类，这需要大量代码。请尝试将其缩减为显示问题a所需的代码。您可以使用在上提供一个片段，以便运行。谢谢@DooM！我编写了关键帧代码，并在想要触发它时添加了这个类。flashingQuality{动画名称：动画；动画持续时间：1.5s；动画迭代次数：2；}