JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotate"></div>
Speed
<input id="speed" type="range" value="15" max="30" min="0" step="1">
  
Opacity
<input id="opacity" type="range" value="0.8" max="0.9" min="0" step="0.1">
    
<input id="button" type="button" value="ralentir" >

CSS

.rotate { width:100px; height:100px; background-color:#CCC; }
#speed { margin-top:50px;}


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

JavaScript

$('#speed').change(function(){
    $('.rotate').css({'-webkit-animation': 'rotate '+this.value+'s linear infinite'});
});

$('#opacity').change(function(){
    $('.rotate').css({'opacity': this.value});
});



compteur = 0;
$('#button').click(function(){
	compteur++;
	$('.rotate').css({'-webkit-animation': 'rotate '+compteur+'s linear infinite'});	
});