我能否使用CSS（无需JS）重启GIF图像？

Question

我有一个类似这样的CSS代码：

.three-image-widget div.hover-icon img.original { display: block; }
.three-image-widget div.hover-icon img.hovered { display: none; }
.three-image-widget div.hover-icon:hover img.original { display: none; }
.three-image-widget div.hover-icon:hover img.hovered { display: block; }

我有一些名为.original的图片，它们是以.png格式存在的。而.hovered图片则是以动画.gif格式存在的，我希望当鼠标悬停在div.hover-icon元素上时，这些动画可以开始播放。我知道可以通过JavaScript技巧来实现这一点：

$('div.hover-icon').hover(function(){
    $(this).find('.original').hide(); 
    var hov = $(this).find('.hovered'), 
        copy = hov.attr('src'); 
        hov.attr('src','').attr('src',copy);
});

但是我能否只使用纯CSS来实现相同的效果呢？

- Subpar Web Dev

Answer 1

不可以。你需要重新加载GIF，CSS无法完成此操作。

- cnorthfield

---

好的。我认为可能是可能的，因为可以使用CSS更改href。 - Subpar Web Dev

CSS用于展示。很抱歉，您无法使用它修改文档对象模型:( 随意接受我的答案。 - cnorthfield

Answer 2

使用纯CSS，我能想到的最接近的方法是在:hover时更改URL，但它只会重置一次：

div {
  background-image: url(http://i.imgur.com/6wffOji.gif);
  height:50px;
  width: 100px;
}

div:hover {
  background-image: url(http://i.imgur.com/6wffOji.gif?v=1);
}

<div></div>

这种方法需要使用background-image代替<img>标签。

---

编辑：另一种方法是将GIF图像转换为1列的精灵图，在这一列中，每个帧都放置在一个行内，然后使用CSS @keyframes和animation来更好地控制图像动画，你可以反转、交替、控制持续时间等等。

简单的动态GIF： GIF精灵（无动画，静态图像）： 代码：

div {
  height:50px;
  width: 100px;
  background-image: url(http://i.imgur.com/3YMNTbS.gif);
}

div:hover {
  animation: gif steps(6) 0.5s forwards;
}

@keyframes gif {
  to {background-position: 0 100%;}
}

<div></div>

正如您所看到的，:hover 状态触发了 gif 动画关键帧。在这里，steps(n) 函数是关键，它将以步长迭代帧，而不是连续转换。 n 是您精灵中帧数的数量。

我使用 SpritePlane 在 Photoshop 中生成了精灵图。创建精灵图很容易，大小大约相同，可以保存为 JPEG 进行更好的压缩或 PNG 以获得平滑的透明通道（也可以进行压缩）。

- Aziz