css - 使用静态平移旋转关键帧

Question

我有一个圆圈在网站加载时充当占位符：

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #ff8800e3;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg) translate(-50%,-50%); }
    100% { transform: rotate(360deg) translate(-50%,-50%); }
  }

<div class="loader"></div>

关键帧应该使圆围绕自己的中心旋转，但它同时旋转和平移。我需要翻译是静态的，这样圆圈在旋转时保持在原位。

我将如何实现这一目标？

标签： csscss-animationskeyframe