title: Animate square div into trapezoid
body: <p>As title states, I am trying to animate a square div into a trapezoid using jquery .animate(). However, the only animation I am getting is the width adjustment and I am not quite sure why this is occuring.</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>$(function () {
      $('.square').hover(function () {
          $(this).animate({
              borderRight: '100px solid red',
              borderTop: '50px solid transparent',
              borderBottom: '50px solid transparent',
              height: '100px',
              width: '0'
          });
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.square {
      height: 100px;
      width: 100px;
      background-color: red;
  }
  div.left {
   border-right: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   height: 100px;
   width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="square"&gt;&lt;/div&gt;
  
  
  &lt;div class="left"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>