Question

I have coded a compass and a compass needle for a header, when you hover over the compass the needle spins at a 720 degree angle, however, i want a way so that when i move my mouse off the compass it doesn’t reverse. SOrry if i’m overlooking an easy solution but here’s my current code to explain what im doing better.

.arrow{
    width:100px; 
    height:100px;
    background-image:url(https://dl.dropbox.com/u/81513943/Monolith/images/compass.png);
    background-size:100px;
}

.arrowhover{
    position:absolute;
    margin-top:-100px;
    background-size:100px;
    width:100px;
    -webkit-transition: all 1.7s ease-in-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    height:100px;
}

.arrowhover:hover{      
    -webkit-transform: rotate(1440deg);
    -moz-transform: rotate(1440deg);
    -webkit-transition: all 1.7s ease-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

so yeh, compass is normal, hover it spins 720 degrees and on mouse out i want no animation, is there a way to do this?

p.s im useless at jquery and javascript

Answer 1

check my updated fiddle: http://jsfiddle.net/rHpDn/3/

I added transition: all 0s ease-in-out; to .arrow, so it does’t have a transition back anymore.