Material Design 图标 css 旋转不居中

Question

我正在尝试使用来自https://materialdesignicons.com/的图标制作一个加载微调器，但该图标不仅会旋转，还会从中心略微移动。

我有这些风格：

@keyframes spin-animation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spin:before {
  display: block;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  -webkit-animation: spin-animation 2s linear infinite;
  animation: spin-animation 2s linear infinite;
}

是<i class="mdi mdi-something spin">元素。所以它添加:before了图标的内容。此元素位于绝对定位的包装器中，具有display: flex, 水平和垂直居中。

问题是当图标旋转时，它不会围绕其中心旋转。轴稍微移动。图标不会停留在一个居中的位置，而是会轻微移动。

我试过了：

• 为i元素赋予宽度和高度
• 为:before元素赋予宽度和高度
• 将spiner动画从移动i到:before
• 我在 stackoverflow 上发现的不同样式，例如 transform-origin: center center;

图标本身具有相同的功能x，y dimensions因此应该没有问题。旋转时尺寸会发生变化，但我想这是正确的吗？

Answer 1

在此线程中查看 Gabriele Petrioli 的答案：https ://stackoverflow.com/a/14859567/1374439关于如何使用 CSS3 实现自旋。

根据他的建议，以下内容非常适合我。

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Answer 2

现在是 2021 年，使用mdi-spin

例子：

mdi mdi-loading mdi-spin