悬停时暂停和反转 CSS 动画答案

【问题标题】：Pause and reverse CSS animation on hover悬停时暂停和反转 CSS 动画
【发布时间】：2015-05-18 21:44:57
【问题描述】：

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

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

&lt;div class="intern"&gt;&lt;/div&gt;

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

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

【问题讨论】：

请包含您的相关代码，而不是仅仅链接jsfiddle。此外，当您说出您想要的并且显然有一些代码时，您并不清楚您的代码当前做了什么，以及它缺少什么。你能总结一下你的问题吗？
我认为你不能这样做，因为你在 CSS 中只有两种状态：正常状态和悬停状态。你不能用 CSS 来操作它。当用户将鼠标从图像上移开并在某个点停止动画并完成动画时，CSS 无法查看。为此，您需要 javascript。

标签： css animation

【解决方案1】：

这可以通过对 CSS 进行一些更改来实现：

将background-position: 0px -1683px; 添加到.intern:hover。这将确保动画在最后一帧“暂停”。目前当悬停动画结束时background-position 会回到0px 0px;。
在from 和to 中反转background-position 为@-webkit-keyframes in
在0% 和100% 中将background-position 反转为@-webkit-keyframes out

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

&lt;div class="intern"&gt;&lt;/div&gt;

请注意，使用 background-position: 0px -1683px; 是因为精灵表中的最后一张图像 (background-position: 0px -2057px;) 实际上是第一帧的副本。

【讨论】：