title: CSS animation with transforms only on the X axis
body: <p>Is it possible to animate only the X axis with using a combination of CSS transition and transform, I want to use the translate3D value as its hardware accelerated on mobile.  </p>
  
  <p>The code below works great with my left to right animation however the issue comes when I try to interact with the element in any other way as I end up getting an unwanted animation as the transition is set to 'all'.  I thought changing this to 'left' would do it but it dosent work with trasnlate3D which I suppose makes sense as you are not animation the left position but moving on the x axis with translate3d</p>
  
  <pre><code>.slide-xy {             -webkit-transition: 0.25s all ease-out; }
  .slide-xy {            -webkit-transform: translate3d(0,0,0); }
  .active .slide-xy {    -webkit-transform: translate3d(-80%,0,0); }
  </code></pre>