title: CSS transition not working with transform
body: <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>