JSFiddle - React, Tailwind, and code Playground

by Kev

HTML

<!--<img src="http://khalpen.co.uk/review/img/shining_pattern.jpg">-->
<div id="pattern"></div>

CSS

html, body {
    margin:0;
    display:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}
img {
    margin:0 auto;
    display:block;
    width:100%;
    height:100%;
}
#pattern {
    position:absolute;
    display:block;
    bottom:0;
    height:100%;
    width:100%;
background-image:url('http://khalpen.co.uk/review/img/shining_pattern.jpg');    background-size:contain;
    background-position: center center;
    background-repeat:repeat;
       background-size:500%; 
}


.patternzoomout {
  animation:patternzoomout 5s 1 ease normal forwards; /* Chrome, Safari, Opera */
    -webkit-animation:patternzoomout 5s 1 ease normal forwards; /* Chrome, Safari, Opera */
    
}
 @-webkit-keyframes patternzoomout {
    0% {
        
    }
    100% {
        background-size:10%;
    }
}

.patternmovedown {
  animation:patternmovedown 5s 1 ease normal forwards; /* Chrome, Safari, Opera */
    -webkit-animation:patternmovedown 5s 1 ease normal forwards; /* Chrome, Safari, Opera */
    
}
 @-webkit-keyframes patternmovedown {
    0% {         background-size:10%;

    }
    100% {
        background-size:10%;
        background-position:center -4000%;
    }
}

JavaScript

var pattern = $('#pattern');


pattern.click(function() {
  $(this).addClass("patternzoomout");
});

pattern.on("animationend", myEndFunction);
pattern.on("webkitAnimationEnd", myEndFunction);



function myEndFunction() {
    pattern.addClass('patternmovedown');
    pattern.removeClass('patternzoomout');

}