JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DemoDiv">
    <div id="DemoBox"></div>
</div>

<a id="Play" href="#">Play</a>
<a id="Stop" href="#">Stop</a>

CSS

#DemoDiv
    {
    margin-left:10px;
    margin-top:3px;
    background-color:#ffffff;
    border:1px solid #c3c3c3;
    height:280px;
    width:430px;
    -webkit-animation-play-state:running;   
    
    }

    #DemoBox
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 10s infinite;
    animation-play-state:running;   
    /* Safari and Chrome */
    -webkit-animation:mymove 10s infinite;
    -webkit-animation-play-state:running;   
    /* Firefox */
    -moz-animation:mymove 10s infinite;
    -moz-animation-play-state:running;   
    }


    @keyframes mymove
    {
    0% {
             -webkit-transform: translate3d(0px, 0px, 0px);
        
             opacity: 1;
        }
    
        100% {
             -webkit-transform: translate3d(0px, 200px, 0px);
            
              opacity: 0;
        }
    }

 @-moz-keyframes mymove /* Firefox */
    {
    0% {
             -moz-transform: translate3d(0px, 0px, 0px);
        
             opacity: 1;
        }
    
        100% {
             -moz-transform: translate3d(0px, 200px, 0px);
            
              opacity: 0;
        }
    }

    @-webkit-keyframes mymove /* Safari and Chrome */
    {
    0% {
         -webkit-transform: translate3d(0px, 0px, 0px);
        opacity: 1;
        
    }

    100% {
         -webkit-transform: translate3d(0px, 200px, 0px);
        opacity: 0;
    }

    }
    .no-animation {
      -webkit-animation: none !important;
      -moz-animation: none !important;
      animation: none !important;
    }

JavaScript

// Adapted from http://jsfiddle.net/gdementis/p2MgM/3/
    // Not working on IE
 $('#Stop').click(function() {
      /*
    $('#DemoBox').css('animation-play-state',  "paused");
    $('#DemoBox').css('-webkit-animation-play-state',  "paused");
    $('#DemoBox').css('-moz-animation-play-state', "paused");
    */
    var ctop = $('#DemoBox').position().top;
    var opac = $('#DemoBox').css("opacity");
    console.log("top: " + ctop, "opacity: " + opac);
   //$('#DemoBox').css{"webkit-animation": "none", "moz-animation": "none", "animation": "none"
    $('#DemoBox').addClass('no-animation').css({'top': ctop-9, "opacity": opac});
});



$('#Play').click(function() {
    
       $('#DemoBox').removeClass('no-animation');
      /*
    $('#DemoBox').css('animation-play-state',  "running");
    $('#DemoBox').css('-webkit-animation-play-state',  "running");
    $('#DemoBox').css('-moz-animation-play-state', "running");
    */
    
});