用 js 更新 css animation-name 和 animation 不起作用

Question

我有一个问题，我想在单击一个按钮时生成一个 animation。 CSS 代码：

img {
  position: relative;
  width: 150px;
  right: 50px;
  z-index: 1;
  animation-duration: 2s;
}

@keyframes Loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这是我的JS 代码：

function Loading() {
document.querySelector("img").style.animationName = "Loading";

setTimeout(() => {
    document.querySelector("img").style.animationName = "";
}, 2000);
}

Answer 1

我刚刚发现问题，问题是 img parent 有一些属性： display: flex; 证明内容：居中； 对齐项目：居中。 我删除了它并且它起作用了。