css - 如何在css中使Hover产生相反的效果

This question already has answers here:

How to reverse an animation on mouse out after hover
                                
                                    （7个答案）
                                
                        
                                4年前关闭。
            
                    
我有以下代码：

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

See live demo here

我的图像在悬停时会自动旋转。我希望将鼠标悬停时也会产生相同的效果。

如何实现？

最佳答案

为什么不使用transition而不是animation？

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

https://jsfiddle.net/62RJc/342/