Question

我有一个11帧的png spritesheet。当您悬停时，它将播放动画直到最后一帧然后暂停，当您将鼠标悬停时，它会将动画反转回第一帧。到目前为止我有这个：

＆＃13;

.intern {
  width: 328px;
  height: 187px;
  background-image: url("http://i.imgur.com/zNsJCnM.png");
  -webkit-animation: in 0.5s steps(11);
}
.intern:hover {
  -webkit-animation: out 0.5s steps(11);
}
@-webkit-keyframes in {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 0px -2057px;
  }
}
@-webkit-keyframes out {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -2057px;
  }
}

＆＃13;

<div class="intern"></div>

＆＃13;

JS小提琴： http://jsfiddle.net/os2jm4h5/

有人可以帮帮我吗？我想用CSS做这个（请不要使用JavaScript），最好只使用一个div。

Answer 1

只需对CSS进行一些更改即可实现：

将background-position: 0px -1683px;添加到.intern:hover。这将确保动画＆＃34;暂停＆＃34;在最后一帧。目前，当悬停动画完成后，background-position会返回0px 0px;。
background-position中的from和to的{{1}}
@-webkit-keyframes in中的background-position和0%的{{1}}

＆＃13;

100%

＆＃13;

@-webkit-keyframes out

＆＃13;

请注意，使用.intern { width: 328px; height: 187px; background-image: url("http://i.imgur.com/zNsJCnM.png"); -webkit-animation: in 0.5s steps(11); } .intern:hover { -webkit-animation: out 0.5s steps(11); background-position: 0px -1683px; } @-webkit-keyframes in { from { background-position: 0px -2057px; } to { background-position: 0px 0px; } } @-webkit-keyframes out { 0% { background-position: 0px 0px; } 100% { background-position: 0px -2057px; } }是因为精灵表（<div class="intern"></div>）中的最后一张图片实际上是第一帧的副本。

悬停时暂停和反转CSS动画

1 个答案: