思路：使用animation设置动画，使用rect.style.animationDuration设置动画持续时间(注意单位是s)。

<style type="text/css">
   #rect {
     width: 120px;
     height: 100px;
     background-color: black;
     animation:rect 10s
   }
   @keyframes rect {
      from {
         transform: rotate(0deg);
      }
      to {
         transform: rotate(360deg);
      }
   }
</style>
<body>
 <div id="rect"></div>
 <input id="range" type="range" min="1" max="10" value="1" step="1"/> 
 <script type="text/javascript">      
    let input=document.getElementById("range")
    input.onchange=function(){
       let rect=document.getElementById("rect")
       let speed=this.value
       rect.style.animationDuration=11-speed+'s'
    }
</script>

总结：使用animation设置动画，使用rect.style.animationDuration设置动画持续时间(注意单位是s)。表示范围的input框是type为range，min为最小值，max是最大值，step是间隔，注意属性均是字符串。