Javascript css转换在悬停时没有转换，在鼠标离开时保持静态

我已经为一个标题编码了一个指南针和一个指南针，当你将鼠标悬停在指南针上时，指南针会以720度的角度旋转，但是，我需要一种方式，以便当我将鼠标从指南针上移开时，它不会反转。对不起，如果我忽略了一个简单的解决方案，但这里是我目前的代码，以解释我做得更好

.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);
}

所以，是的，指南针是正常的，悬停旋转720度，鼠标悬停，我不想要动画，有办法吗

p、 s我在jquery和javascript上没用

检查我更新的小提琴：

---

我添加了

转换：所有0都易于输入输出到.arrow，因此它不再有向后的转换。
不知道如何在代码方面帮助您，但我可以告诉您，它正在反转的原因是，您使用的CSS只会在它悬停时旋转它，因此，一旦它未悬停，进程将反转。理论上，您可以使用JavaScript调用onmouseover函数来旋转图像。这样就不会有反转。你能描述一下“没有动画”吗？是否要在没有动画的情况下返回初始位置？或者停在那里，当你鼠标离开时不要移动？@Fabricio Matté指针看起来与开始位置相同，因为它是一个720度的转弯，但是的，我希望它在没有动画的初始动画后保持不变，所以换句话说，在悬停时设置动画，并保持静止，直到你再次悬停选中此项