CSS transition not working with transform
<p>I have the following CSS:</p>

<pre class="lang-css prettyprint-override"><code>.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%;
}
</code></pre>

<p>What I'm trying to do is to perform an animation <code>bottom-&gt;top</code> when a popup get's visible and <code>top-&gt;bottom</code> when it get's hidden.</p>

<p>Before, I was using <code>transition: all 1s ease;</code> and it was working, but it was laggy so I decided to use <code>transition: transform 1s ease;</code>. 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?</p>

<p>Thank you.</p>

<p><strong>EDIT</strong></p>

<p>Here a working CodePen example:</p>

<p><a href="http://codepen.io/andipavllo/pen/QyeJjq" rel="nofollow">http://codepen.io/andipavllo/pen/QyeJjq</a></p>

<p>And here is a not working example:</p>

<p><a href="http://codepen.io/andipavllo/pen/KVOrgQ" rel="nofollow">http://codepen.io/andipavllo/pen/KVOrgQ</a></p>

<p>They are exactly the same, except for <code>transition: transform 1s ease;</code> instead of `transition: all 1s ease;</p>