使用步进函数实现PNG序列的CSS过渡效果

Question

使用步进函数实现PNG序列的CSS过渡效果

5

我正在尝试使用PNG序列制作动画，该动画在悬停时进行过渡，并在悬停状态结束时回到初始状态。

为此，我使用了css过渡和“steps”时间函数，如下所示：

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

请查看此示例（我使用了一张随机的PNG精灵图，不是实际使用的那个）：http://jsfiddle.net/MLWL5/ 基本上，当您缓慢悬停在元素上时，这个效果可以正常工作。但是，如果您快速悬停并离开元素，则过渡似乎会在背景图片完成上一个转换的一半时触发，然后步骤数不匹配，会产生不良影响。

我可以使用JavaScript来触发过渡效果，但是否有纯CSS的解决方案呢？

- Leon

1

如果您查看该图像，我认为您会发现它不是一个长条（http://www.photoshopgurus.com/forum/attachments/photoshop-newbies/1638d1292612974t-png-sequence-cinema-4d-rosu_1filmstrip.png）。 - Paulie_D

是的，我知道，我只使用了顶部一行。我可以裁剪掉图像的其余部分，但效果相同。 - Leon

为避免任何混淆，我编辑了这个fiddle，现在使用的是只有一行水平的图像。 - Leon

如果您不在取消悬停时设置转换，则它可以正常工作http://jsfiddle.net/MLWL5/1/。 - vals

没错，但是我想让我正在处理的特定动画在取消悬停时向后播放。 - Leon

我相信这个插件会对你有所帮助：http://cherne.net/brian/resources/jquery.hoverIntent.html - vaskort

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

这不是一个完美的解决方案，但你可以通过动画来处理悬停变化，让它在某种程度上起作用。

如果你在动画完成后取消悬停，它会正常工作，但如果你快速取消悬停，则不会进行任何动画。

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代码，但我已尽可能将其设置得清晰明了。