<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="one">
</div>
.one {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575871/one_uj1ubs.jpg') center no-repeat;
width: 500px;
height: 600px;
animation: change .5s infinite;
}
@keyframes change {
0%,
20% {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575871/one_uj1ubs.jpg') center no-repeat;
}
21%,
40% {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575870/two_yjigkh.jpg') center no-repeat;
}
41%,
60% {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575871/three_dvhqjq.jpg') center no-repeat;
}
61%,
80% {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575870/two_yjigkh.jpg') center no-repeat;
}
80%,
100% {
background: url('http://res.cloudinary.com/dxssokt4h/image/upload/v1510575871/five_tuf8ob.jpg') center no-repeat;
}
}
