title: ease in from left to right Css3
body: <p>I've been searching for two hours trying to figure out how to make this transition happen? I've tried the code from W3 schools but it just made my Div bigger
  <a href="http://themeforest.net/item/kappe-full-screen-portfolio-blog-wp-theme/full_screen_preview/6854128" rel="nofollow">http://themeforest.net/item/kappe-full-screen-portfolio-blog-wp-theme/full_screen_preview/6854128</a></p>
  
  <p>This is what I have so far</p>
  
  <pre><code> .nav{
  width:20%;
  position:fixed;
  margin-right: 1.25%;
  margin-left:1.55%;
  background-color:white;
  height:auto;
  font-weight:bold;
  box-shadow: 
              0px 11px 8px -10px #CCC,
              -15px -8px 8px -10px #CCC;
  }
  .nav li {
  text-align:right;
  }
  
  nav li a{
  
  background-color:white;
  color:black;
  text-decoration:none;
  padding-right:5%;
  display:inline-block;
  padding-left:70%;
  border-right: 1px dotted #DCDCDC;
  border-bottom: 1px dotted #DCDCDC;
  border-top: 1px dotted #DCDCDC;
  font-size: 150%;
  font-weight:300;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
  transition:width 2s;
  }
  
  .nav li:hover a
  {
  color:white;
  background: #2876b2;
  width:100%;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div class="nav left" &gt;
  
  &lt;nav &gt;
  &lt;ul&gt;
  &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;                          
  &lt;/ul&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>