有没有办法让 GIF 在悬停时播放并在鼠标离开时暂停？

Question

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

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

这可以吗？最好不要 JavaScript，但如果需要我可以使用它。

Answer 1

有。基本上您需要使用 individual frames 自己创建 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'); }
}

Here is an example 我能够找到并更改。

有没有办法让 GIF 在悬停时播放并在鼠标离开时暂停？

Is there a way to make GIF play on hover and pause when mouse is out?

html

css

gif

hover

playback