Using css3 translate instead of position: left

Question

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left Reference article Paul Irish

For the life of me, I cannot get this css3 translate animation to work. So I made a jquery interaction that has the same to behavior. click on the X .navi-toggle in the top left corner to see it in action. It's rather jerky and I'm really curious on how much better translate() will work.

Codepen

HTML

<div id="page-container"> 
  <nav id="route-bar" >
  </nav>
  <div class="w-panel">
      <div class="navi-toggle">X</div>
      <div class="panel">
  </div><!--end of w-panel-->
</div><!--end of page container-->

CSS

.open-panel
    {
        left:336px;

    }

coffeescript

$(".navi-toggle").on
  click: ->
    $(".w-panel").toggleClass "open-panel"

Answer 1

Hopefully this gets you a bit closer. Based on your CodePen example you really just need to animate the width, which could be done using keyframes or possibly a transition.

CSS

.open-panel {
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-name: slideOver;
    -webkit-transform:translateX(90%);
}

@-webkit-keyframes slideOver {
    from {
      -webkit-transform:translateX(0%);
    }
    to {
      -webkit-transform:translateX(90%);
    }
} 

Here's the full jsFiddle (apologies on the -webkit prefix, hopefully this gets you started).

Answer 2

I have no idea about translate but you can use margin instead.