如何在css中产生与悬停相反的效果

我有以下代码：

img:hover {
  -webkit-animation:spin 0.5s linear forwards;
  -moz-animation:spin 0.5s linear forwards;
  animation:spin 0.5s linear forwards;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotatey(360deg);
    }
}

@-webkit-keyframse spin {
    100% {
    -webkit-transform: rotatey(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotatey(360deg);
        transform:rotatey(360deg);
    }
}

我有一个图像，在悬停状态下旋转。我希望悬停时也会出现同样的效果

---

如何实现这一点？

为什么不使用<代码>转换而不是<代码>动画

img{
    transform: rotatey(0deg);
    transition: transform .5s ease-in-out;
}
img:hover {
  transform: rotatey(360deg);
}

---

但我不希望它无限旋转。。。如果我在上面悬停，我希望它只旋转一次。如果我在悬停的时候把鼠标放在上面，它就会一直旋转，这不是我想要的。完美的答案！非常感谢：D