如何在css中动画后在圆形边框上固定圆弧位置

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #000;
}

@keyframes borderAnimation {
  0% {
    border-width: 2px;
  }
  50% {
    border-width: 10px;
  }
  100% {
    border-width: 2px;
  }
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #000;
  animation: borderAnimation 3s infinite;
}