CSS3動畫沒有的onLoad

後一直在努力

$(function() { 
    $('#item').css({ 
     webkitTransform: 'translate(100px, 100px)' 
    }); 
});

我試着翻譯該元素具有以下CSS：

transform: translate3d(0,0,0); 
transition-duration: 1s; 
transition-property: transform;

所以我會在1秒期望的運動元素。結帳演示here

奇怪的是，動畫有時會發生，有時不會（意味着它沒有任何動畫在100px，100px）。所以問題是爲什麼它不總是工作，因爲我在做任何事之前都在等待onLoad？

來源

2014-02-11 Jeanluca Scaljeri

可能只是我，但你的心不是如做任何事情。 – Tony

不只是你託尼，也不爲我做任何事情。 – steinmas

[這裏]（http://jsfiddle.net/Qk5g3/4/）是一個更新版本。我已經在onLoad回調內添加了一個超時 –

嘗試的document.ready

$(document).ready(function() 
    $('#item').css({"-webkit-transform":"translate(100px,100px)"}); 
});

來源

2014-02-11 21:56:24

同樣的結果：[jsfiddle]（http://jsfiddle.net/Qk5g3/9 /），有時它可以工作，有時它不工作 –

'$（document）.ready（function（）{}）;'==='$（function（）{}）'http：// learn。 jquery.com/using-jquery-core/document-ready/ – brouxhaha

您可以設置過渡到1000毫秒，或者1秒。將這個數字增加到10000ms，它應該動畫10秒。

來源

2014-02-11 22:05:04 steinmas

true，I ment 1s :)我也有與10s相同的情況，當我點擊'運行'時，結束位置上的藍色div沒有任何變化 –

嗨動畫可以純粹使用CSS3動畫完成。代碼如下

<!DOCTYPE html>

@keyframes moving { 
     from { 
      -webkit-transform: translate(0, 0); 
      -moz-transform: translate(0, 0); 
      -ms-transform: translate(0, 0); 
      -o-transform: translate(0, 0); 
      transform: translate(0, 0); 
     } 

     to { 
      -webkit-transform: translate(100px, 100px); 
      -moz-transform: translate(100px, 100px); 
      -ms-transform: translate(100px, 100px); 
      -o-transform: translate(100px, 100px); 
      transform: translate(100px, 100px); 
     } 
    } 

    @-moz-keyframes moving { 
     from { 
      -webkit-transform: translate(0, 0); 
      -moz-transform: translate(0, 0); 
      -ms-transform: translate(0, 0); 
      -o-transform: translate(0, 0); 
      transform: translate(0, 0); 
     } 

     to { 
      -webkit-transform: translate(100px, 100px); 
      -moz-transform: translate(100px, 100px); 
      -ms-transform: translate(100px, 100px); 
      -o-transform: translate(100px, 100px); 
      transform: translate(100px, 100px); 
     } 
    } 

    @-webkit-keyframes moving { 
     from { 
      -webkit-transform: translate(0, 0); 
      -moz-transform: translate(0, 0); 
      -ms-transform: translate(0, 0); 
      -o-transform: translate(0, 0); 
      transform: translate(0, 0); 
     } 

     to { 
      -webkit-transform: translate(100px, 100px); 
      -moz-transform: translate(100px, 100px); 
      -ms-transform: translate(100px, 100px); 
      -o-transform: translate(100px, 100px); 
      transform: translate(100px, 100px); 
     } 
    } 
    div#item { 
     background-color:blue; 
     height:20px; 
     width:20px; 
     -webkit-animation: moving 1s; 
     -moz-animation: moving 1s; 
     -ms-animation: moving 1s; 
     -o-animation: moving 1s; 
     animation: moving 1s; 
    } 
</style>

小提琴：http://jsfiddle.net/Qk5g3/11/

來源

2014-02-12 00:04:18

我改變了一個jsfiddle設置爲onLoad，現在它也可以工作（[jsfiddle]（http://jsfiddle.net/Qk5g3/13/））。仍然很奇怪，因爲我會說這與使用'$（function（）{..}）'不同 –

CSS3動畫沒有的onLoad

回答

相關問題