title: Animate a rotated line css?
body: <p>I am animating a line from 0 to 100%.</p>
  <p><strong>Keyframe CSS:</strong></p>
  <pre><code>@keyframes animate-line {
      0% {
          width: 0%;
      }
      100% {
          width: 100%;
      }
  }
  </code></pre>
  <p><strong>Line CSS:</strong></p>
  <pre><code>.line {
      animation: animate-line 5s infinite;
      background: none repeat scroll 0px 0px transparent;
      border-top: 2px solid rgba(255, 255, 255, 0.5);
      display: block;
      position: absolute;
      z-index: 9;
      height: 1px;
      -moz-transform: rotate(16deg);
      -webkit-transform: rotate(16deg);
      transform: rotate(16deg);
      left: 20px;
      top: 200px;
  }
  </code></pre>
  <p>I am using vendor prefixes everywhere in live code, omitted here for readability.</p>
  <p>You can see I rotate the line with <code>transform: rotate()</code>; doing that makes the line veer up going from 0 to 100%. I can think logically why it is doing that, I define the left/top properties so I would think it starts at <code>top: 200px</code> and <code>left: 20px</code> and expand as expected but why it still wants to veer up ?</p>
  <p><kbd><a href="http://jsfiddle.net/ZAdtU/" rel="nofollow noreferrer">Running demo on jsfiddle</a></kbd></p>
  <p>Hopefully someone can point this out, I'm sure its simple.</p>
  <p><strong>ANSWER:</strong> Just learned about a new property <code>transform-origin: 0 0</code> thanks to @barrett. It can be useful to animate a rotated line, and if anyone else is doing that using <code>transform-origin: 0;</code> is a huge piece, thanks.</p>