CODEWITHSUNDEEP
csscss-sprites
Jagadeesh J
Jagadeesh J

Reputation: 1301

Reverse a spritesheet animation on mouse out

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

Upvotes: 0

Views: 1191

Answers (2)

Stefanos Vakirtzis
Stefanos Vakirtzis

Reputation: 448

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

Upvotes: 1

e382df99a7950919789725ceeec126
e382df99a7950919789725ceeec126

Reputation: 5981

This trick is made by animation-direction.

Example: 

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

http://jsfiddle.net/XuSXK/

Upvotes: 0

Related Questions