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