将标签动画移动到指定坐标

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}

.tag {
  animation: move 1s forwards;
}

<div id="tag" style="position: absolute; left: 0; top: 0;">标签</div>

<script>
  var tag = document.getElementById('tag');
  var targetX = 100;
  var targetY = 100;
  var duration = 1000; // 动画持续时间，单位为毫秒

  var startTime = null;
  function moveTag(timestamp) {
    if (!startTime) startTime = timestamp;
    var progress = timestamp - startTime;
    var ratio = Math.min(progress / duration, 1); // 计算动画进度比例

    var currentX = ratio * targetX;
    var currentY = ratio * targetY;

    tag.style.left = currentX + 'px';
    tag.style.top = currentY + 'px';

    if (progress < duration) {
      requestAnimationFrame(moveTag);
    }
  }

  requestAnimationFrame(moveTag);
</script>