Kompatibilität zwischen translate (-50%, -50%) und Animationen

Question

die folgende CSS Mit:

.screen { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

.card { 
    width: 200px; background: #ccc; 
    position: relative; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

@keyframes kf_anim { 
    0% { 
     transform: rotateY(315deg); 

    } 

    100% { 
     transform: rotateY(360deg); 
    } 
} 

.card_anim { 
    animation: kf_anim 0.5s forwards; 
} 

Wenn ich

<div class="screen"> 
    <div class="card">content</div> 
</div> 

Ich erhalte eine horizontal und vertikal zentriert-div, was ich will. Aber wenn ich die Animation

<div class="screen"> 
    <div class="card card_anim">content</div> 
</div> 

Die Animation hinzufügen wird durchgeführt, aber das div wird nicht mehr zentriert, das heißt die (-50%, -50%) übersetzen ist außer Kraft gesetzt.

Ich habe versucht, translate(-50%, -50%) neben dem rotateY in den Keyframes hinzuzufügen, aber dann funktioniert die Animation nicht richtig.

Wie kann ich das lösen, vorausgesetzt, dass ich die Breite und Höhe nicht kennen kann?

JSFiddle: https://jsfiddle.net/n5pma29m/

Answer 1

Sie haben kombiniert, um die CSS zu verwenden, wie unten

@keyframes kf_anim { 
     0% { 
      transform: translate(-50%, -50%) rotateY(315deg); 

     } 

     100% { 
      transform:translate(-50%, -50%) rotateY(360deg); 
     } 
    } 

Geige Aktualisiert here

Answer 2

CSS-Eigenschaften sind nicht „additiv“ - Sie sind der vorherige Transformationswert in Ihrer Animation überschrieben werden.

Sie müssen auch das übersetzen Teil in Ihren Keyframes festlegen:

@keyframes kf_anim { 
    0% { 
     transform: translate(-50%, -50%) rotateY(315deg); 

    } 

    100% { 
     transform: translate(-50%, -50%) rotateY(360deg); 
    } 
}