JSFiddle - React, Tailwind, and code Playground

HTML

<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style=""/>


<div id="play">
    click here to play
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
  background-color: transparent;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-perspective: 1400px;
  -moz-perspective: 1400px;
  perspective: 1400px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.gwd-img-r1sa {
  position: absolute;
  width: 192px;
  height: 146px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  left: 312px;
  top: 604px;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

@-webkit-keyframes gwd-empty-animation {
  0% { opacity: 0.001; }
  100% { opacity: 0; }
}
@-moz-keyframes gwd-empty-animation {
  0% { opacity: 0.001; }
  100% { opacity: 0; }
}
@keyframes gwd-empty-animation {
  0% { opacity: 0.001; }
  100% { opacity: 0; }
}
@-webkit-keyframes gwd-gen-hlergwdanimation_gwd-keyframes {
  0% { left: 312px; top: 604px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; }
  30% { left: 595px; top: 350px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; }
  50% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear;}
  100% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0,...

JavaScript

$imgtoplay = $(".gwd-gen-hlergwdanimation");

$imgtoplay.on('webkitAnimationStart oanimationstart msAnimationStart animationstart', function() {
        setTimeout(function(){
            $imgtoplay.css({'-webkit-animation-play-state': 'paused','animation-play-state':'paused'})          
        },300);
    console.log('hallo');
	})


    
$imgtoplay.on('mouseenter',function(){
                          $imgtoplay.css({'-webkit-animation-play-state': 'running','animation-play-state':'running'});
});