title: Jquery translate multiple times with button
body: <p>How to make a button which triggers CSS translate multiple times?</p>
  
  <pre><code>&lt;button&gt;CLICK&lt;/button&gt;
  
  // CLICK
  $(document).ready(function () {
  
  $('button').click(function (event) {
      event.preventDefault();
  
      if (button clicked once) {
  
          $('section').css({'-webkit-transform':'translateY( 100%) '});
  
      } else if (button clicked second time) {
  
          $('section').css({'-webkit-transform':'translateY( 200% )'});
  
      } else if (button clicked second time) {
  
          $('section').css({'-webkit-transform':'translateY( 300% )'});
      }        
  
      return false;
  });
  });
  </code></pre>
  
  <p>Or maybe there is other approach to make CSS translate? P.S I know I can replace .css with .addclass</p>