How to make the opposite effect of Hover in css

Question

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

See live demo here

I have an image that rotates over itself on hover. I want the same effect to happen when hover out.

How to achieve that?

But I don't want it to rotate infinite... if I hover on it, I want it to rotate only once. If I keep my mouse on it while hover, then it will keep rotating, and that's not what I want. — Sonhja, Aug 27 '15 at 09:55

score 3 · Accepted Answer · edited Aug 27 '15 at 09:58

3

Why not use transition instead of animation?

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

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

edited Aug 27 '15 at 09:58

m4n0

27,411
26
71
84

answered Aug 27 '15 at 09:55

Jacob

1,812
2
19
29

1

Perfect answer! Thank you very much :D – Sonhja Aug 27 '15 at 09:56

How to make the opposite effect of Hover in css

1 Answers1