如何使下一个悬停动画仅在前一个悬停动画结束后才开始？

/* 定义动画关键帧 */
@keyframes hover-animation {
  0% {
    /* 初始状态 */
    transform: scale(1);
  }
  50% {
    /* 中间状态 */
    transform: scale(1.5);
  }
  100% {
    /* 结束状态 */
    transform: scale(1);
  }
}

/* 应用动画到元素 */
.element {
  animation: hover-animation 1s ease-in-out;
}

/* 当前悬停动画结束后，开始下一个悬停动画 */
.element:hover {
  animation: hover-animation 1s ease-in-out;
  animation-fill-mode: forwards;
}

const element = document.querySelector('.element');
let isAnimating = false;

function startAnimation() {
  if (!isAnimating) {
    isAnimating = true;
    element.style.transform = 'scale(1.5)';
    setTimeout(() => {
      element.style.transform = 'scale(1)';
      isAnimating = false;
    }, 1000);
  }
}

element.addEventListener('mouseover', startAnimation);