CSS动画持续时间变量不会更新

Question

我正在制作具有真实数据（每分钟心跳数）的心率动画。

transform: rotate(45deg);
animation: animateHeart 0s infinite;

这是我的动画

@keyframes animateHeart {
  0% {
    transform: rotate(45deg) scale(0.8);
  }
  5% {
    transform: rotate(45deg) scale(0.9);
  }
  10% {
    transform: rotate(45deg) scale(0.8);
  }
  15% {
    transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(0.8);
  }
  100% {
    transform: rotate(45deg) scale(0.8);
  }
}

当我在方法中执行以下操作时：

const duration = (60 / BPM);
document.getElementById('heart').style.animationDuration = duration.toFixed(2) + 's';

它只会执行一次。

有人可以帮忙吗？