Keep animated background-color after animation is finished

Question

I have added a css class that shakes a tr-element a bit when applied, and a color is faded in, how do i make the color in the animation stay as the tr's background color after the animation is done? I tried to add it to the highlights class, but then the animation didn't do anything with the background-color, even if i added background:none !important on the first frame.

My stylesheet:

.highlights {
    animation-name: highlights;
    -webkit-animation-name: highlights; 

    animation-duration: 2s; 
    -webkit-animation-duration: 2s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;    

    visibility: visible !important;     
}
@keyframes highlights {
    0% {
        background: none !important;
        transform: translateY(-4%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }           
    100% {
        background:#edb138;
        transform: translateY(0%);
    }
}