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

Question

我试图制作一个旋转的标志，但是一旦添加了动画，它就会跳下来，我不知道为什么。我只是添加-webkit-animation: rotation 5s infinite linear;而不是调整位置。

这是它的实时版本，您可以单击初始动画后的徽标以添加旋转类。任何想法如何使其保持原位？

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>

标签： htmlcssanimation

Answer 1

如果您的元素已经应用了非动画变换transform: translate(-50%, -50%)，则animation关键帧还应该考虑初始变换 - 因为后来的变换不会添加到顶部，而是合成在现有的变换上。
你应该重复它们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>