为什么添加旋转动画会偏移我的图像？

Question

我想制作一个旋转的徽标，但是一旦添加了动画，它就会向下跳，我不明白为什么。我只是添加 -webkit-animation: rotation 5s infinite linear; 而根本没有调整位置。

这是它的实时版本，您可以在初始动画后单击徽标以添加旋转class。有什么办法让它留在原地吗？

const EL_logo = document.querySelector(".permanent-logo");
EL_logo.addEventListener("click", () => {
  EL_logo.classList.add("rotate-logo");
});

.permanent-logo {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 70px;
  width: 120px;
}

.rotate-logo {
  animation: rotation 5s infinite linear;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<div class="initial-overlay">
  <div class="logo-container">
    <img class="permanent-logo" src="https://i.stack.imgur.com/g2LtV.png" alt="logo">
  </div>
</div>

Answer 1

如果您的元素已经应用了非动画变换 transform: translate(-50%, -50%)，animation 关键帧也应考虑初始变换 - 因为后续变换不会添加到顶部，composited超过现有的。
你应该重复它们 transform: translate(-50%, -50%) rotate(0deg);:

const EL_logo = document.querySelector(".permanent-logo");
EL_logo.addEventListener("click", () => {
  EL_logo.classList.add("rotate-logo");
});

.permanent-logo {
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 70px;
  width: 120px;
}

.rotate-logo {
  animation: rotation 5s infinite linear;
}

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

<div class="initial-overlay">
  <div class="logo-container">
    <img class="permanent-logo" src="https://i.stack.imgur.com/g2LtV.png" alt="logo">
  </div>
</div>

为什么添加旋转动画会偏移我的图像？

Why does adding a rotation animation offset my image?

html

css

animation