JSFiddle - React, Tailwind, and code Playground

HTML

<div id="img"></div>
<button type="button">change</button>

CSS

#img{
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR6CRSAoE8I7AUbRwKXScakaTFWO0t_TvPPmW1aXyNTGeErtLuT4w');
    width: 250px;
    height: 150px;
}
@-webkit-keyframes changeImage{
	0%{background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR6CRSAoE8I7AUbRwKXScakaTFWO0t_TvPPmW1aXyNTGeErtLuT4w');}
	50%{background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQW-e3YENmFht8f9xhYO9j2iEcZj5nNShoa-k4Qyxsy1cmboan18w');}
	100%{background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQsKu9qKoMkWRP_MhNwMYQVoX2HBMzJ29U8ApHoSk4d9ha0DDGR');}
}

#imgz{
	animation: changeImage 1s;
	animation-play-state: running;
	animation-fill-mode: forwards;
	-webkit-animation: changeImage 1s linear;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count: 1;
}

JavaScript

$('button').click(function(){
    $('#img').css({'background-image':'url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQW-e3YENmFht8f9xhYO9j2iEcZj5nNShoa-k4Qyxsy1cmboan18w")'});
});