如何在css中制作Hover的相反效果[重复]答案

【问题标题】：How to make the opposite effect of Hover in css [duplicate]如何在css中制作Hover的相反效果[重复]
【发布时间】：2015-11-21 15:07:01
【问题描述】：

我有以下代码：

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

我有一张在悬停时会自行旋转的图像。我希望鼠标悬停时也能产生同样的效果。

如何实现？

【问题讨论】：

但我不希望它无限旋转...如果我将鼠标悬停在它上面，我希望它只旋转一次。如果我在悬停时将鼠标放在上面，那么它会继续旋转，这不是我想要的。

标签： css

【解决方案1】：

为什么不用transition 而不是animation？

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

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

【讨论】：

完美答案！非常感谢：D