我正在使用 PNG Sprite 序列创建一个动画,它将在悬停时进行过渡,并在悬停状态结束时动画返回。
$( "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");
}
);
div { width:50px;
height:72px; background:url(http://openbookproject.net/thinkcs/python/english3e/_images/duke_spritesheet.png) left top;
}
<div></div>
我使用 image sprite 和 jquery 来开发我的,这在 chrome 浏览器上运行良好,但在 Mozilla 上动画效果不佳。
Mozilla 没有执行转换。它正在跳转到最终状态。
最佳答案
据我所知,Firefox 不支持 background-position-x
。请改用 background-position
,这会起作用。
关于jquery - 使用 jquery 的 png 序列上的 CSS 转换在 Mozilla 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29141188/