我一直在試驗jQuery動畫與CSS3動畫,我還想測試2D/3D翻譯以查看哪個更好。CSS3動畫translate3d無法正常工作
有誰知道爲什麼我的CSS3 translate3d不起作用?我已經在桌面和移動設備上嘗試過了。
任何幫助表示讚賞
HTML
<div id="container1" class="container">transition</div>
<div id="container2" class="container">translate</div>
<div id="container3" class="container">translate3d</div>
<div id="container4" class="container">jQ animate</div>
CSS
.container {position:absolute; left:20px; width:80px; height:80px; padding:5px;}
/* transition */
#container1 {top:20px; background:red;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;}
#container1.on {left:250px} /* It moves if from pos absolute of parent, the body tag in this example */
/* 2D translate */
#container2 {top:120px; background:yellow;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;}
#container2.on {-webkit-transform: translate(230px);
-moz-transform: translate(230px);
-o-transform: translate(230px);
-ms-transform: translate(230px);
transform: translate(230px);} /* It moves if from the starting point, 20px left in this example */
/* 3D - translate */
#container3 {top:220px; background:lime;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;}
#container3.on {-webkit-transform: translate3d(230,0,0);
-moz-transform: translate3d(230,0,0);
-o-transform: translate3d(230,0,0);
-ms-transform: translate3d(230,0,0);
transform: translate3d(230,0,0);} /* It moves if from the starting point, 20px left in this example */
/* jQuery Animate */
#container4 {top:320px; background:orange;}
jQuery的
$('#container1').click(function()
{
$(this).toggleClass('on');
})
$('#container2').click(function()
{
$(this).toggleClass('on');
})
$('#container3').click(function()
{
$(this).toggleClass('on');
})
$('#container4').toggle(function()
{
$(this).animate({'left':'250px'});
}, function()
{
$(this).animate({'left':'20px'});
})
哪些瀏覽器您使用? –
桌面 - 鉻,Safari瀏覽器,IE 7/8/9,FF – sygad1
Android手機 - Chrome,原生,Opera Mobile,火狐 iPhone 3Gs - 原生safari – sygad1