A “flash” of color, using pure css transitions

$("#go").click(function() {
    $("#box").removeClass("demo");
    setTimeout(function() {
        $("#box").addClass("demo");
    }, 1);
});

.container {position: relative;}

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        background-color: Yellow;
        opacity:1;
    }
    22% {
        background-color: Yellow;
    }
    77% {
        background-color: Red;
    }
    100% {
        background-color: #777;
    }
}
    
.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>