如何多使用css轉換屬性？

基本上我想要的圖像改變其立場有時，所以我用這個代碼：如何多使用css轉換屬性？

JQUERY：

$(block).delay(2200).css({     
       transform: 'matrix(0.586,0.8,-0.8,0.586,40,40)' 
      }).css({ 
       "transition-duration": "5s" 
      }).delay(2200).css({     
       transform: 'matrix(0.866,0.5,-0.6,0.866,0,0)' 
      }).css({ 
       "transition-duration": "5s" 
      });

但第一個變換後沒有什麼變化。

我該如何多使用這個css屬性？有更好的方法來做同樣的效果？

來源

2016-03-04 dave

爲什麼不使用CSS動畫而不是JS？它會運行速度更快，並有JS禁用誰人的工作：

.block { 
@animation: myAnimation, 14400ms, forwards, linear; 
} 

@keyframes myAnimation { 
    15.3% { transform: none; } 
    50% { transform: matrix(0.586,0.8,-0.8,0.586,40,40); } 
    65.3% { transform: matrix(0.586,0.8,-0.8,0.586,40,40); } 
    100% { transform: matrix(0.866,0.5,-0.6,0.866,0,0); } 
}

沒有任何反應的時間（14400分之2200）第15.3％。
在接下來的5000ms（直到50％的標記），第一個轉換展開。
接下來15.3％的時間沒有任何反應。
在接下來的5000ms（直到50％），第二個轉換展開。

有一個偉大的教程在MDN Using CSS Animations

來源

2016-03-05 02:40:41 AJFarkas

謝謝，這樣對我的作品！ – dave

請選擇它作爲您的首選答案，以便其他人可以看到您的問題已得到解答。 – AJFarkas

完成！非常感謝！ – dave

delay()只適用於動作，而不適用於其他東西。你將不得不使用setTimeout()

setTimeout(transform_one, 2200); 

function transform_one() { 
    $('#block').css({ transform: 'matrix(0.586,0.8,-0.8,0.586,40,40)' }).css({ "transition-duration": "5s" }); 
    setTimeout(transform_two, 7200); 
} 

function transform_two() { 
    $('#block').css({ transform: 'matrix(0.866,0.5,-0.6,0.866,0,0)' }).css({ "transition-duration": "5s" }); 
}

jsfiddle

注意，第二超時有一個7200ms延遲，作爲動畫本身需要5000毫秒。 5000ms +你的2200ms = 7200ms。

來源

2016-03-04 23:45:49 WcPc

如何多使用css轉換屬性？

回答

相關問題