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.\[code\].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: progidXImageTransform.Microsoft.BasicImage(rotation=3);}\[/code\]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