JSFiddle - React, Tailwind, and code Playground

HTML

<button id="Animation">Stop-Animate</button>
<br>
<br><br>

<button id="button3D" class="cubespinner" >Mouvement</button>

CSS

@keyframes spincube {
    from,to {
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
 
    83% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  }

  .cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;

    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;
    -moz-transform-origin: 60px 60px 0;
    -ms-transform-origin: 60px 60px 0;
    transform-origin: 60px 60px 0;
  }


.notransition {
  animation-name: none  !important;
   -webkit-animation-name: none  !important;
  -webkit-animation-iteration-count: 0 !important;
  animation-iteration-count: 0 !important;
}

JavaScript

$(function(){ 
 
  $("#Animation").on('click',function () {
   $("#button3D").toggleClass("notransition");
  })

  })