Why does adding a rotation animation offset my image?

Question

Im trying to make a logo that spins, but once the animation is being added, it jumps a down and i can't figure out why. I'm just adding -webkit-animation: rotation 5s infinite linear; and not adjusting the position at all.

Here's a live version of it, you can click the logo after the initial animation to add the rotate class. Any ideas how to make it stay in place?

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

If your element has already a non animated transform applied transform: translate(-50%, -50%), the animation keyframes should also consider that initial transformations - because later transformations are not added on top, composited over the existing ones.
You should repeat them 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>