Question

我正在尝试使用spritesheet动画徽标，但它工作得非常好。代码就像

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

Answer 2

这个技巧是由animation-direction制作的。

示例：

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

http://jsfiddle.net/XuSXK/

在鼠标移出时反转spritesheet动画

2 个答案: