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

Question

我正在尝试使用PNG序列制作动画,该序列在悬停时有转换,并在悬停状态结束时动画回来.

为此,我使用带有"步骤"计时功能的css转换,如下所示:

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

看一个实例的小提琴(我使用过Googled的随机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代码可以简化一点,使用函数来避免重复的代码,但我已经设置它像posible一样清晰