JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

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 = $('.pic'),
    playState = '-webkit-animation-play-state';

imgs.click(function() {    
    imgs.css(playState, function(i, v) {
        return v === 'paused' ? 'running' : 'paused';        
    });      
    $('body').toggleClass('paused', $(this).css(playState) === 'paused');    
});