我如何根据滑块输入值的增量来动画我的R闪亮图的输出？

<div>
  <input type="range" id="slider" min="0" max="100" step="1">
</div>
<div id="r-shining"></div>

#r-shining {
  width: 100px;
  height: 100px;
  background-color: red;
}

/* 添加闪烁动画效果 */
@keyframes shining-animation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

const slider = document.getElementById('slider');
const rShining = document.getElementById('r-shining');

slider.addEventListener('input', function() {
  const increment = parseInt(this.value); // 获取滑块值的增量
  const animationDuration = 1 / increment; // 根据增量计算动画持续时间

  rShining.style.animation = `shining-animation ${animationDuration}s infinite`; // 应用动画效果
});