我可以用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做等效的吗？

Answer 1

不，你不能。你需要重新加载GIF，CSS不能这样做。

Answer 2

我能用纯CSS解决的最接近的事情是更改:hover上的网址，但它只会重置一次：

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和{{ 1}}为了更好地控制图像动画，你可以反转，交替，控制持续时间等。

简单GIF（动画）：

GIF精灵（无动画，静态图片）：

代码：

animation

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)是精灵中的帧数。

我用SpritePlane用Photoshop生成精灵。创建精灵很容易，尺寸大致相同，你可以保存JPEG以获得更多压缩，或者保存PNG以获得平滑的alpha通道（也可以压缩）。