Gif Text Clip

HTML

<div class="navMenu2">
    <ul>
      <li class="liHver hoverClass"><a href="index.html"><span class="jap">作業</span><br>werk</a></li>
     <ul>
</div>

CSS

.navMenu2 li{color: #0e0e0e; font-size: 10rem; font-weight: 600;list-style-type: none;transition: background-image 2s ease-in-out ;}
.navMenu2 a{text-decoration: none;color: #0e0e0e;}

.hoverClass:hover, .hoverClass:focus {
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(http://gifmaker.org/download/20171105-21-n9B1fxNwBctBCeMo/GIFMaker.org_ptEtRM.gif) repeat;
  background: linear-gradient(transparent, transparent), url(http://gifmaker.org/download/20171105-21-n9B1fxNwBctBCeMo/GIFMaker.org_ptEtRM.gif) repeat;
  -webkit-background-clip: text;
  
}

JavaScript

$(document).ready(function(){
   $(".hoverClass").mouseleave(function(){
      $(this).removeClass("hoverClass");
      $(this).addClass("hoverClass");
  	}); 
});