title: Can I move an animated line from right to left?
body: <p>I'm animating line with css3 from width:0 to width:100%. At the moment is moving from left to right, but I want to make it to start from right to left. Is this posible at all with keyframes?</p>
  
  <p>here is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .content {
     width: 400px;
     height: 200px;
     color: white;
     cursor: pointer;
     text-transform: uppercase;
     padding-bottom: 20px;
     position: relative;
     background: #333;
   }
   .content .line {
     height: 2px;
     background: white;
     position: absolute;
     top: 10px;
     -webkit-animation: dude .75s 1 forwards;
     -moz-animation: dude .75s 1 forwards;
     -o-animation: dude .75s 1 forwards;
     animation: dude .75s 1 forwards;
   }
   @-webkit-keyframes dude {
     0% {
       width: 0;
     }
     100% {
       width: 100%;
     }
   }
   @-moz-keyframes dude {
     0% {
       width: 0;
     }
     100% {
       width: 100%;
     }
   }
   @-o-keyframes dude {
     0% {
       width: 0;
     }
     100% {
       width: 100%;
     }
   }
   @keyframes dude {
     0% {
       width: 0;
     }
     100% {
       width: 100%;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>