javascript - 如何使用 CSS 将动画应用于垂直居中的元素

Question

我在另一个 div 中有一个 div，我想对其应用 CSS 动画。问题似乎是我正在对 div 应用多个转换。为了使内部 div 居中，我使用了以下内容:

#inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

然后我在单击时将以下类添加到 div:

.spin {
    animation: whirl 1s ease-in-out;
}

@keyframes whirl {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

看来我已经使用了一个transform 来使div 居中，所以动画无法正常工作。如果我从 CSS 中删除 transform: translate(-50%, -50%); 行，动画可以正常工作，但 div 不居中。

Here is a jsfiddle我做了这个问题。

感谢您的帮助!

Answer 1

问题是因为 translate 在 animation 上丢失了。通过在动画上添加 translate 和 rotate 来改变它

@keyframes whirl {
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

function spin() {
  $("#inner").addClass("spin");
}

#main {
  background-color: black;
  position: relative;
  width: 400px;
  height: 400px;
}

#inner {
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 10px;
 transform: translate(-50%, -50%);
}

.spin {
  animation: whirl 1s ease-in-out;
}

@keyframes whirl {
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="inner" onclick="spin()"></div>
</div>