使用步骤在png序列上的CSS转换

Question

我正在尝试使用PNG序列来制作动画，它在悬停状态结束时进行转换，并在悬停状态结束时恢复动画。

为此，我使用带有“步骤”定时函数的css转换，如下所示：

transition:background .5s steps(9, end);

看看这个活生生的例子(我用了一个随机的PNG精灵，我在谷歌上搜索过，它不是我实际使用的)

http://jsfiddle.net/MLWL5/

基本上，这是很好的工作，当你盘旋在元素上慢慢。当您快速地上下悬停元素时，当背景图像处于前一个过渡过程的一半时，该转换似乎会触发，然后步骤数将不匹配，这将产生不希望的效果。

我可以使用javascript来触发转换，但是有谁知道是否有CSS唯一的解决方案呢？

Answer 1

这不是一个完美的解决方案，但你可以让它用动画来处理悬停变化。

动画完成后，如果你没有悬停，它会正常工作，但如果你不快速地悬停，它就不会动了。

CSS

div { width:50px; 
    height:72px;             background:url(http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png) left top;
    transition:background 1.5s steps(9, end);
    background-position: 0px top; 
    -webkit-animation: none;
}

div:hover { 
    background-position:-450px top; 
    -webkit-animation: bkg 1.5s steps(9);
    transition: none;

} 

@-webkit-keyframes bkg {
    0% {background-position: 0px top;}
  100% {background-position: -450px top;}
}

CSS演示

以及使用jQuery的解决方案。这一次将动画从它在非悬停时刻的位置倒转过来。它还会重新计算时间，这样就不会慢下来

jQuery

$( "div" ).hover(
    function() {
        var elem = $(this);
        var cur = parseInt(elem.css("background-position-x"));
        var steps = (450 + cur) / 50;
        var time = steps * 0.1;
        var trans = "background " + time + "s steps(" + steps + ", end)";
        elem.css("transition", trans);
        elem.css("background-position", "-450px 0px");
    }, 
    function() {
        var elem = $(this);
        var cur = parseInt(elem.css("background-position-x"));
        var steps = - cur / 50;
        var time = steps * 0.1;
        var trans = "background " + time + "s steps(" + steps + ", end)";
        elem.css("transition", trans);
        elem.css("background-position", "0px 0px");
  }
);

jQuery演示

jQuery代码可以精简一点，使用函数来避免重复代码，但是我已经把它设置得和可执行的一样清晰。