Sergey and,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
display: flex;
width: 400px;
height: 200px;
}
.slider > div{
border: 1px #7CFC00 solid;
flex: 1;
background-color: #FF0000;
margin: 2px;
background-repeat: no-repeat;
transition: all 1.4s ease-in-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var d = $(".slider > div");
function f()
{
var el = d[Math.random()*d.length|0],
gradient = Math.random()*100|0 ;
$(el).css({"background-image" : "linear-gradient(#103810 "+gradient+"%, transparent "+gradient+"%)"});
window.setTimeout(f,200)
}
f()
});
</script>
</head>
<body>
<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
</body>
</html>