<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <img id="pic1" class="pic" src="https://cdn.pixabay.com/photo/2019/03/08/13/15/city-4042288_960_720.jpg"> <img id="pic2" class="pic" src="https://cdn.pixabay.com/photo/2019/03/04/17/45/sea-4034792_960_720.jpg"> <img id="pic3" class="pic" src="https://cdn.pixabay.com/photo/2018/08/20/19/10/castle-3619698_960_720.jpg "> </div> </div> <script> var imgs = document.querySelectorAll('.pic'); for ( var i = 0; i < imgs.length; i++ ) { imgs[i].onclick = toggleAnimation; imgs[i].style.webkitAnimationPlayState = 'running'; } function toggleAnimation() { var style; for ( var i = 0; i < imgs.length; i++ ) { style = imgs[i].style; if ( style.webkitAnimationPlayState === 'running' ) { style.webkitAnimationPlayState = 'paused'; document.body.className = 'paused'; } else { style.webkitAnimationPlayState = 'running'; document.body.className = ''; } } } </script>

.pic { position: absolute; opacity: 0; } #pic1 { -webkit-animation: pic1 4s infinite linear; } #pic2 { -webkit-animation: pic2 4s infinite linear; } #pic3 { -webkit-animation: pic3 4s infinite linear; } @-webkit-keyframes pic1 { 0% {opacity: 0;} 5% {opacity: 1;} 45% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 0;} } @-webkit-keyframes pic2 { 0% {opacity: 0;} 50% {opacity: 0;} 55% {opacity: 1;} 95% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes pic3 { 0% {opacity: 0;} 50% {opacity: 0;} 55% {opacity: 1;} 95% {opacity: 1;} 100% {opacity: 0;} } .paused { background-color:#ddd; }