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

Question

I have a div within another div to which I would like to apply a CSS animation. The problem seems to be that I am applying multiple transforms to the div. In order to center the inner div, I am using the following:

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

I then add the following class to the div on click:

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

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

It seems that the fact that I have already used a transform to center the div makes it so that the animation doesn't work correctly. If I remove the transform: translate(-50%, -50%); line from the CSS, the animation works correctly, but the div is not centered.

Here is a jsfiddle I made to demonstrate the issue.

Thanks for your help!

Answer 1

The issue is because the translate is lost on animation .change it by adding both translate and rotate on 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>