title: css3 refuses to transition properly
body: <p>I'm having some issues with css and transitioning. I can get it to either do a smooth transition (where it slides) or an instantanious transition (I would like it to be a smooth fade effect)</p>
  
  <p>My solution must be pure html/css. (I don't want to monkey around with javascript/jquery and the like)</p>
  
  <p>A live example is on <a href="http://www.aeonsplice.com/icontest.html" rel="nofollow">my website</a>. (I'd like my end result to be the middle icon's transition, but gradual)</p>
  
  <p><strong>I am using a sprite for the images.</strong></p>
  
  <p>Here is the current source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #navlist{position:relative;}
  #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
  #navlist li, #navlist a{height:32px;display:block;}
  
  #home{left:0px;width:32px;}
  #home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;}
  #home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;}
  
  #prev{left:32px;width:32px;}
  #prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;}
  #prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;}
  
  #next{left:64px;width:32px;}
  #next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;}
  #next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;ul id="navlist"&gt;
    &lt;li id="home"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="prev"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="next"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>