JSFiddle - React, Tailwind, and code Playground

by bionicoz

HTML

<div>
 <img class="a" src="http://lorempixum.com/1000/300/">
 <img class="b" src="http://lorempixum.com/1000/300/">
</div>


<p>cambia img</p>

CSS

p{
    cursor:pointer;
}

img {
 position: absolute;
}

div {
 position: relative;
 width: 600px;
 height: 300px;
 overflow: hidden;
}

img.a {
 -webkit-animation: mymove1 12s linear infinite;
}

img.b {
 -webkit-animation: mymove2 12s linear infinite;
}

@-webkit-keyframes mymove1 {
 from { -webkit-transform: translate3d(-999px, 0, 0); }
 to { -webkit-transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes mymove2 {
 from { -webkit-transform: translate3d(0, 0, 0); }
 to { -webkit-transform: translate3d(1000px, 0, 0); }
}

JavaScript

$(function(){
    $('p').click(function(){

        $('img').attr('src',"http://lorempixum.com/1000/300/");
                
    });
});