logo标签列表

如何在CSS中制作与Hover相反的效果

css
3

I have the following code:

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

点击此处查看实时演示

我有一张图片，当鼠标悬停在上面时，它会自行旋转。我希望在鼠标离开时同样出现相同的效果。

如何实现这个效果？

但我不希望它无限旋转...如果我将鼠标悬停在上面，我只想让它旋转一次。如果我在悬停时将鼠标保持在上面，那么它将继续旋转，这不是我想要的。 - Sonhja
1个回答
3
为什么不使用transition而不是animation呢？
img{
    transform: rotatey(0deg);
    transition: transform .5s ease-in-out;
}
img:hover {
  transform: rotatey(360deg);
}

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

1
完美的答案！非常感谢:D - Sonhja
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接