JSFiddle - React, Tailwind, and code Playground

HTML

<div class='mcA_icon_wrap '>
  <div class='mcA_icon_wrap_inner playing'>

        <ul>
            <li><div class='mcA_icon' id='mcA_icon_1'></div></li>
            <li><div class='mcA_icon' id='mcA_icon_2'></div></li>
            <li><div class='mcA_icon' id='mcA_icon_3'></div></li>       
        </ul>
  </div>
</div>

CSS

@-webkit-keyframes r {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(360deg); }
 }

.mcA_icon_wrap  {
    margin-left: 55px;
    margin-top: 25px;
    width: 150px;
    height:150px;
    background-color: blue;
    -webkit-transition: transform 1s;
}
.mcA_icon_wrap_inner  {
   background-color: red;
   width: 150px;
   height:150px;
   -ms-animation: r 15s infinite linear;
   -moz-animation: r 15s infinite linear;
   -webkit-animation: r 15s infinite linear;
    animation: r 15s infinite linear; 
 }

.mcA_icon_wrap_inner.playing {
    -ms-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.mcA_icon_wrap_inner.paused {
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
     animation-play-state: paused;
 }

.mcA_icon {
     width: 30px;
     height:30px;
     background-color: yellow; 
}

JavaScript

$(".mcA_icon_wrap_inner").mouseenter(function() {
    $(this).toggleClass("playing paused");
}).mouseleave(function() {
    $(this).toggleClass("paused playing");
});

$(".mcA_icon").on("click", function() {
    var id = $(this).attr('id');
    var idNum = id.split("_");
    var x = parseInt(idNum[2]) * 30;
    $(".mcA_icon_wrap").css({"-webkit-transform": "rotate("+ x +"deg)"});
});