Transition -> un tour, c'est tout!

by iamvdo

HTML

<ul class="nav">
    <li><a href="#"><img src="http://dev.iamvdo.me/icones1.png" />Videos</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones2.png" />Games</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones3.png" />Music</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones4.png" />Settings</a></li>
</ul>

CSS

*{margin:0;padding:0;}
body{
    font-size:.9em;
    background:#eee;
    font-family:sans-serif;
}
.nav{
    width:540px;
    height:30px;
    margin:100px auto;
}
.nav li{
    display:inline-block;
}
.nav a{
    display: block;
    width:130px;
    height:27px;
    padding-top:3px;
    vertical-align:middle;
    border-radius:3px;
    background: #C3F051;
    background: -webkit-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: -moz-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: -o-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    border:1px solid rgba(0,0,0,.3);
    border-top: 1px solid white;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,0 0 3px rgba(0,0,0,.3);
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}
.nav a:hover,
.nav a:focus{
    background: #FAA3AA;
    background: -webkit-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: -moz-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: -o-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
}
.nav a:hover img,
.nav a:focus img{
    margin-right:15px;
}
img{
    display: inline-block;
    width:28px;height:28px;margin:-2px 5px 0 2px;
    background: -webkit-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: -moz-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: -o-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    border-radius: 15px;
    vertical-align: middle;
    -webkit-transition: margin-right .5s ease;
      ...