JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<img id="pic1" class="pic" src="http://placekitten.com/200/200">
<img id="pic2" class="pic" src="http://placekitten.com/150/250">

CSS

.pic {
    position: absolute;
    opacity: 0;
}
#pic1 {
    -webkit-animation: pic1 4s infinite linear;
}
#pic2 {
    -webkit-animation: pic2 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;}
}

.paused { background-color:#ddd; }

JavaScript

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