有没有办法让 GIF 在鼠标出来时悬停和暂停播放?

Question

我想知道是否有办法使 GIF 具有这种确切的行为：

• 在页面中开始暂停;
• 仅在悬停时播放;
• 暂停在将鼠标拖出图像时的确切帧处。

可以这样做吗？最好没有JavaScript，但如有必要，我可以使用它。

Answer 1

有。基本上，您需要使用单个帧自己创建 gif。本质上，您创建 X 个帧，然后使用keyframes将它们作为绝对定位的div 的background-image属性循环浏览。"gif"以属性animation-play-state:paused开头，并在悬停时更改为running。显然可以切换这些属性。请考虑以下事项：

您的标记：

<div class="gif"></div>

还有你的 CSS：

.gif {
position: absolute;
margin: auto;
background-image: url(/path/to/starting.frame);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
animation: play 0.5s infinite steps(1);
animation-play-state: paused;
}
.gif:hover {
animation-play-state:running;
}
@keyframes play {
0%   { background-image: url('/path/to/0.frame'); } 
15%  { background-image: url('/path/to/1.frame'); }
30%  { background-image: url('/path/to/2.frame'); }
45%  { background-image: url('/path/to/3.frame'); }
60%  { background-image: url('/path/to/4.frame'); }
75%  { background-image: url('/path/to/5.frame'); }
90%  { background-image: url('/path/to/6.frame'); }
100% { background-image: url('/path/to/7.frame'); }
}

这是我能够找到并更改的一个例子。