时间戳

首页 > 解决方案 > CSS动画持续时间变量不会更新

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

问题描述

我用真实数据制作心率动画（每分钟跳动）。

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';

它只会执行一次。

标签： javascriptcssangularionic-framework

解决方案

推荐阅读