css - 在鼠标移出时反转 spritesheet 动画

Question

我正在尝试使用 spritesheet 制作 Logo 动画，效果很好。 代码就像

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

所以图像在鼠标悬停时是动画的。现在我不知道如何在鼠标移出时反转动画。有人可以帮我吗

Answer 1

你可以像这样使用 jquery 很容易地达到预期的效果:

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

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

您可以根据需要将以下 Css 添加到 #logo 中:

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