使用步骤对 png 序列进行 CSS 转换

Question

我正在尝试使用 PNG 序列制作动画，它在悬停时有一个过渡，并在悬停状态结束时动画返回。

为此，我使用了带有“步进”计时功能的 css 转换，如下所示:

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

查看 fiddle 中的一个实例(我使用了一个我在谷歌上搜索过的随机 PNG Sprite ，它不是我实际使用的那个)

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 demo

还有一个使用 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 demo

jQuery代码可以精简一点，使用函数避免重复代码，但我已经设置得尽可能清晰