使用步骤对 png 序列进行 CSS 过渡
Posted
技术标签:
【中文标题】使用步骤对 png 序列进行 CSS 过渡【英文标题】:CSS transition on png sequence using steps 【发布时间】:2014-05-22 15:24:46 【问题描述】:我正在尝试使用 PNG 序列制作动画,该序列在悬停时具有过渡效果,并在悬停状态结束时返回动画。
为此,我使用了带有“steps”计时功能的 css 过渡,如下所示:
transition:background .5s steps(9, end);
查看 fiddle 以获得一个实时示例(我使用了一个随机的 PNG 精灵,我在 Google 上搜索过,它不是我实际使用的那个)
http://jsfiddle.net/MLWL5/
当您缓慢地将鼠标悬停在元素上时,这基本上可以正常工作。当您快速将鼠标悬停在元素上和离开时,如果背景图像在上一个过渡的一半时触发,则过渡似乎会触发,然后步数不匹配会产生不良效果。
我可以使用 javascript 来触发转换,但有谁知道是否有针对此的纯 CSS 解决方案?
【问题讨论】:
如果你看图片,我想你会发现它不是一条长条(photoshopgurus.com/forum/attachments/photoshop-newbies/…) 是的,我知道,我只使用顶行。我可以裁剪图像的其余部分,但效果相同。 为避免混淆,我编辑了小提琴,现在使用只有一个水平行的图像。 不设置un-hover上的过渡也可以jsfiddle.net/MLWL5/1 没错,但我希望我正在使用的特定动画在您取消悬停时向后动画。 【参考方案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 代码可以精简一点,使用函数避免重复代码,但我已将其设置为尽可能清晰
【讨论】:
jQuery 解决方案看起来非常不错。谢谢! 任何对 vals 的 jQuery 解决方案的高级版本感兴趣的人,请查看:jsfiddle.net/GustvandeWal/MLWL5/138。在这个 Fiddle 中,您需要显式设置背景大小,因为 jQuery 在其计算中使用它。除此之外,它完全独立于其余参数。以上是关于使用步骤对 png 序列进行 CSS 过渡的主要内容,如果未能解决你的问题,请参考以下文章