我的动画在Chrome和Safari中运行良好,但在Firefox中却没有。我的jquery代码是
HTML
<ul id="clientlist">
<li name="clientitem0" class="clientitem">
<div id="client0" class="client shadow">
<img src="images/work/bbc.jpg" border=0>
<p>National BBC</p>
<a href="bbc.co.uk">
<div class="website"></div>
</a>
</div>
</li>
</ul>
脚本
$("li[name^='clientitem']").each(function(index) {
$(this).delay(200*index).fadeIn();
$("#client"+index).delay(200*index).animate({"top": "0px"}, "slow");
});
的CSS
.client {
position: relative;
top: 50px;
border: 1px solid #303234;
background: #181B1D;
-webkit-transition: -webkit-transform 0.2s linear;
}
答案 0 :(得分:4)
您为transition
引擎浏览器添加了webkit
效果(例如Safari
,Chrome
等...)。您需要为其他引擎添加类似的东西:
.client {
position: relative;
top: 50px;
border: 1px solid #303234;
background: #181B1D;
-webkit-transition: -webkit-transform 0.2s linear;
-moz-transition: -moz-transform 0.2s linear;
-ms-transition: -ms-transform 0.2s linear;
-o-transition: -o-transform 0.2s linear;
transition: transform 0.2s linear;
}