如何使用CSS將動畫應用於垂直居中的元素

Question

我想將CSS動畫應用於另一個div中的一個div。 問題似乎是我正在對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居中的事實使得它不能正確播放動畫。 如果我刪除transform: translate(-50%, -50%); 在CSS中排成一行，動畫即可正常工作，但div不在居中。

這是我制作的jsfiddle來演示此問題。

謝謝你的幫助！

Answer 1

問題是因為translate在animation上丟失了。通過在animation添加平移和旋轉來更改它

@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>