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

<分区>

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

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

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="/image/g2LtV.png" alt="logo">
  </div>
</div>

最佳答案

如果您的元素已经应用了非动画变换 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="/image/g2LtV.png" alt="logo">
  </div>
</div>

关于html - 为什么添加旋转动画会偏移我的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68550890/

上一篇：wpf - 电源外壳。访问 Runspace 实异常(exception)部的变量

下一篇：ios - 将文本从 View 中的 TextLabel 传递到另一个 View 中的标签

CSS Overflow 只向一个方向滚动

iOS - 动画上显示的文本

android - NineOldAndroids，旋转或移动后无法点击 View

html - 如何关闭父窗口的滚动？

CSS 布局(许多不同大小的图层填充空间)

css - Bulma Flexbox 页面列掉落

css - Bootstrap3 : mobile first approach, 阻止 xs 规则应用于更大的屏幕尺寸

CSS3 动画变换旋转，没有可见的过渡

html - 如何为这些绝对定位的 <a> 元素应用边距？