Reverse a spritesheet animation on mouse out

Question

I am trying to animate a logo with spritesheet ans it is working pretty well. The code is like

#logo {
  background: url('../img/logo.png');
  height: 142px;
  width: 426px;
}
#logo:hover{
  -webkit-animation: logoAnim .2s steps(19) forwards; 
} 
@-webkit-keyframes logoAnim { 
    100% { background-position: -8094px 0; }
}

So the image is animating on mouse hover. Now I am clueless how to reverse the animation on mouse out. Can someone help me pls

possible duplicate of [CSS3: reverse animation on mouse out after hover](http://stackoverflow.com/questions/16516793/css3-reverse-animation-on-mouse-out-after-hover) — Mr. Alien, Jan 04 '14 at 11:22

score 1 · Answer 1 · answered Jan 04 '14 at 11:27

1

You can achieve the desired effect very easily using jquery like this:

$('#logo').mouseenter(function() {
  $(this).css("background-position","-8094px 0");
});

$('#logo').mouseout(function() {
  $(this).css("background-position","0 0");
});

and you can include the following Css to #logo according to your needs:

#logo {
  -webkit-transition: 200ms ease-in-out;
}

answered Jan 04 '14 at 11:27

Stefanos Vakirtzis

448
1
7
19

Nice thought.. However this will animate the sprite by just moving it it.. We are missing the steps here – Jagadeesh J Jan 05 '14 at 11:47

score 0 · Answer 2 · answered Jan 04 '14 at 11:22

0

This trick is made by animation-direction.

Example:

-webkit-animation: logoAnim 1s alternate-reverse;

http://jsfiddle.net/XuSXK/

answered Jan 04 '14 at 11:22

e382df99a7950919789725ceeec126

5,751
4
31
56

The mouse out is not reversing in this fiddle – Jagadeesh J Jan 05 '14 at 11:00

Reverse a spritesheet animation on mouse out

2 Answers2