CSS transition not working with transform - css

Question

I have the following CSS:
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0,0,0,.3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
transition: transform 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top:100%;
visibility: hidden;
}
.visible {
top: 50%;
}
What I'm trying to do is to perform an animation bottom->top when a popup get's visible and top->bottom when it get's hidden.
Before, I was using transition: all 1s ease; and it was working, but it was laggy so I decided to use transition: transform 1s ease;. Doing this the transition is not working anymore even if I think the code should be fine. Does anyone know why and how to fix it?
Thank you.
EDIT
Here a working CodePen example:
http://codepen.io/andipavllo/pen/QyeJjq
And here is a not working example:
http://codepen.io/andipavllo/pen/KVOrgQ
They are exactly the same, except for transition: transform 1s ease; instead of `transition: all 1s ease;

Answer 1

In the working example you're transitioning all the properties and not only the transform property: this is important because also the top property is involved in the effect, changing from 100% to 50% (when you remove the class hidden and add the class visible).
As you can verify, if you change
transition: transform 1s ease;
into
transition: transform 1s ease, top 1s ease;
the transition works as expected.

Answer 2

Previously when you had transition: all 1s ease, in that translate and top values were getting animated.
But once you changed it to transition: transform 1s ease top property was left out.
.popup {
background-color: white;
border-style: solid;
z-index: 1001;
box-shadow: 15px 15px 10px rgba(0, 0, 0, .3);
border-radius: 3px;
position: absolute;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
/* edited the line below by adding top also*/
transition: transform 1s ease, top 1s ease;
}
.centered {
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hidden {
top: 100%;
visibility: hidden;
}
.visible {
top: 50%;
}

Answer 3

Check this pen.
CSS: Modify your css to the following
.popup {
...
transition: transform 1s ease, top 1s ease;
}
And also do not use a vendor prefix if it is not necessary.
For transition only -webkit is needed. and for transform -ms and -webkit will do the job.