为什么添加旋转动画会偏移我的图像？ [复制]答案

【问题标题】：Why does adding a rotation animation offset my image? [duplicate]为什么添加旋转动画会偏移我的图像？ [复制]
【发布时间】：2021-07-28 04:11:56
【问题描述】：

我正在尝试制作一个旋转的徽标，但是一旦添加了动画，它就会跳下来，我不知道为什么。我只是添加-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>

【问题讨论】：

标签： html css animation

【解决方案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>

【讨论】：