JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script>
    function gallery() {
        $('.cornerimg').addClass('flare1');
    }
</script>
<div id="gallery">

    <div class="imageitem">
    <div class="cornerimg flare1" style="background-image:url(http://www.artisanaljavascript.com/images/tradition.jpg);"></div>
    </div>

</div>
    
    <a href="" onclick="gallery(); return false">test</a>

CSS

#gallery .imageitem {
    width:680px;
    height:380px;
    overflow:hidden;
    background-position:0px 0px;
    background-repeat:no-repeat;
    background-color: #000000;
}
.flare1 {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: slide;
    -webkit-animation-name: slide;  
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes pan {
            0% {-webkit-transform:translate(0,0) scale(1.0);}
            100% {-webkit-transform:translate(-20px,-100px) scale(1.3);}
        }
.cornerimg {
    width:680px;
    height:380px;
    -webkit-transition:all 1.0s ease-in-out;
       -webkit-animation-name:pan; 
            -webkit-animation-duration:12.0s;
            -webkit-animation-iteration-count:infinite;
}