title: Width transition - select the transition direct for increase and decrease width
body: <p>I have a transition width rule on a <code>div</code> - </p>
  
  <p><strong>CSS -</strong> </p>
  
  <pre><code>div {
      height : 100px ; 
      width : 0px ; 
      transition-property: width;
      transition-duration: 0.3s;
      transition-timing-function: linear;
  }
  
  .show {
      width : 200px ;
  }
  </code></pre>
  
  <p><strong>HTML -</strong> </p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I make toggle on the <code>show</code> class the transition occur by - </p>
  
  <p>increase width -  from left to right  ,</p>
  
  <p>decrease width -  from right to left  .</p>
  
  <p>I want to make it such that  - </p>
  
  <p>increase width -  from left to right ,</p>
  
  <p>decrease width -  from <strong>left to right</strong>  .</p>
  
  <p>How to achieve that ? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
     $("#btnShow").click(function () {
      $("div").addClass("show");
     });
     $("#btnHide").click(function () {
      $("div").removeClass("show");
     }); 
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background-color: #b0c4de;
    height : 100px ; 
    width : 0px ; 
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: linear;
   }
   
   .show {
    width : 200px ;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div&gt;&lt;/div&gt;
   &lt;button type="button" id="btnShow"&gt;Show&lt;/button&gt;
   &lt;br&gt;
   &lt;button type="button" id="btnHide"&gt;Hide&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>