Wie man Animation auf vertikal zentriert Element mit CSS

Question

anwenden Ich habe ein Div innerhalb einer anderen Div, auf die ich eine CSS-Animation anwenden möchte. Das Problem scheint zu sein, dass ich mehrere Transformationen auf das div anwende. Um das innere div zentriert, verwende ich die folgenden:

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

ich dann die folgende Klasse in die div auf Klick hinzufügen:

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

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

Es scheint, dass die Tatsache, dass ich bereits verwendet haben a transform zu zentrieren das div macht es so, dass die Animation nicht richtig funktioniert. Wenn ich die Zeile transform: translate(-50%, -50%); aus dem CSS entferne, funktioniert die Animation korrekt, aber das div ist nicht zentriert.

Here is a jsfiddle Ich machte, um das Problem zu demonstrieren.

Danke für Ihre Hilfe!

Answer 1

Das Problem ist, weil die translate auf animation .change sie durch Zugabe von sowohl übersetzen und drehen auf 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>