title: Css Move element from left to right animated
body: <p>I have an element that needs to be move from left to right and right to left when I change the left, right variables.</p>
  
  <p>Here is an jsfiddle example that I'm working on it. It moves left to right and right to left but there is no animation.</p>
  
  <p>What I am doing wrong?</p>
  
  <p><strong>CSS:</strong></p>
  
  <p><a href="http://jsfiddle.net/3SYka/1/" rel="noreferrer">Demo JSFiddle</a></p>
  
  <pre><code>div
  {
     width:100px;
     height:100px;
     background:red;
     transition-property: right, left;
     transition-duration: 2s;
     -webkit-transition-property: right, left; /* Safari */
     -webkit-transition-duration: 2s; /* Safari */
     position:absolute;
  }
  div:hover
  {
     right:0px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This example does not work in Internet Explorer 9 and earlier versions.&lt;/p&gt;
  
  &lt;div&gt;&lt;/div&gt;
  
  &lt;p&gt;Hover over the div element above, to see the transition effect.&lt;/p&gt;
  
  &lt;/body&gt;
  </code></pre>