Transition -> un tour, c'est tout!

by iamvdo

HTML

<div class="header">

    <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>

</div>

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:-webkit-linear-gradient(rgba(255,255,255,.3),transparent),#C3F051;
    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;
    border:1px solid rgba(0,0,0,.3);
}
.nav a:hover{
    background:-webkit-linear-gradient(rgba(255,255,255,.4),transparent),#FAA3AA;
}
.nav a:hover 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));
    border-radius:15px;
    vertical-align:middle;
    -webkit-transition:all .5s linear;
}
img.rot{
    -webkit-transform:rotate(360deg);
    -webkit-transition:-webkit-transform .5s linear,margin .5s linear;
}

img.init{
    -webkit-transform:rotate(0deg);
    -webkit-transition:-webkit-transform 0s linear,margin .5s linear;
}

JavaScript

$(function(){

    $('a').mouseenter(function(){
        $(this).find('img').removeClass('init').addClass('rot');
    });
    
    $('a img').bind('webkitTransitionEnd',function(){
        $(this).removeClass('rot').addClass('init');
    });
    
});