Warum beginnt diese CSS-Animation (transform: scale) an der falschen Stelle?

Question

Ich habe diesen Beispielcode http://codepen.io/anon/pen/yaZopZ (relevante Ausschnitte unten), und wenn Sie auf die Schaltfläche klicken, soll das modale Element animieren, indem es sich in der Mitte des Bildschirms öffnet und von nichts zu seiner vollen Größe wächst. Es öffnet sich jedoch unten rechts am Anfang der Animation und endet dann in der Mitte des Bildschirms. Was muss ich an diesem Code ändern, damit er wie erwartet funktioniert?

Es soll sich ähnlich wie die Animation in http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image verhalten, wenn Sie auf das Bild klicken. Aber im Gegensatz zu diesem Beispiel schließt mein Beispiel das Modal, wenn Sie in den Hintergrund klicken und diese Funktionalität beibehalten müssen.

Dies ist der Teil mit der Animation

@keyframes animatezoom { 
    from { 
    transform: scale(0) 
    } 
    to { 
    transform: scale(1) 
    } 
} 

Und das ist, was

.modal { 
    display: block; 
    width: 600px; 
    max-width: 100%; 
    height: 400px; 
    max-height: 100%; 
    position: fixed; 
    z-index: 100; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background: white; 
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9); 
    animation: animatezoom 0.3s; 
} 

animierten Wesen Wenn das Problem nicht hier ist, ist der Rest des Codes in den codepen ich gepostet oben (http://codepen.io/anon/pen/yaZopZ).

Answer 1

es ist, weil Sie die Eigenschaft des modalen translate-scale zu verwandeln sind zu ändern, was Sie tun sollten, ist, sie beide zusammen zu verwenden: DEMO

@keyframes animatezoom { 
    from { 
    transform: translate(-50%, -50%) scale(0) 
    } 
    to { 
    transform: translate(-50%, -50%) scale(1) 
    } 
}