user779159 user779159 - 2 months ago 10
CSS Question

Why is this CSS animation (transform: scale) starting in the wrong location?

I've got this sample code http://codepen.io/anon/pen/yaZopZ (relevant snippets below), and when you click the button the modal element is supposed to animate by opening in the center of the screen and growing from nothing to its full size. However, it opens in the bottom right at the beginning of the animation then finishes in the center of the screen. What do I need to change to that code to make it work as expected?

It's supposed to behave similar to the animation in http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image when you click on the image. But unlike that example, my example closes the modal when you click in the background and needs to retain that functionality.

This is the part with the animation

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


And this is what's being animated

.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;
}


If the problem isn't here, the rest of the code is in the codepen I posted above (http://codepen.io/anon/pen/yaZopZ).

Answer

it's because you're changing the transform property of the modal from translate to scale, what you should do is to use them both together: DEMO

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