"animation "
Bootstrap 3.0.0 Snippet by vicky04666

<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; } }

Related: See More


Questions / Comments: