JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test" id="idtest">A</div>
<ul>
    <li><a href="" class="start">Start</a></li>
    <li><a href="" class="stop">Stop</a></li>
</ul>

CSS

body {
  padding: 80px;
  font-size: 26px;
}

#idtest {
    font-size: 80px;
    display: inline-block;
}

.spin {
  -webkit-animation: spin 20s infinite linear;
}


@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); 
        z-index: 0; }
  100% { -webkit-transform: rotate(359deg); 
        z-index: 359;}
}
@-webkit-keyframes spin2 {
  0% { -webkit-transform: rotate(0deg);  }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

JavaScript

$(document).ready(function() {
    $(".start").click(function(e) {
        e.preventDefault();
        var elem = document.getElementById('idtest');
        elem.style["-webkit-animation"] = "";
        elem.style["-webkit-animation-delay"] = "";
 
        $("#idtest").removeClass("spin2").addClass("spin");
    });
    
    $(".stop").click(function(e) {
        e.preventDefault();
        
        Stopping ();
    });
    
    $(".test").on("animationend",
        function() {
            $(this).removeClass("finishSpin");
        }
    );
});


function Stopping () {
    var elem = document.getElementById('idtest');
    var style = window.getComputedStyle (elem, null);
    var frame = style.getPropertyValue("z-index");
    var delay = - frame / 36;
    elem.style["-webkit-animation"] = "spin2 10s 1 linear";
    elem.style['animation-delay'] = delay + 's';
    elem.className = "";
}