有2個CSS動畫同時執行的元素

HTML元素可能同時執行多個動畫嗎？

例如：

@-webkit-keyframes FADE 
    { 
     from { 
      opacity: 0; 
     } 
     to { 
      opacity: 1; 
     } 
    } 

    @-webkit-keyframes TRICKY 
    { 
     0% { 
      -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     50% { 
      -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0); 
     } 
     75% { 
      -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     100% { 
      -webkit-transform: translate(0px,0) rotate(0) skew(0,0); 
     } 
    } 

// Can this element have FADE execute for 5 seconds BUT halfway between that animation 
// can I then start the TRICKY animation & make it execute for 2.5 seconds? 
#myEle { 
    -Webkit-animation-name: FADE TRICKY; 
    -Webkit-animation-duration: 5s 2.5s; 
}

上面是一個非常簡單的例子。我會有許多動畫庫，如旋轉，淡入淡出等。我不想寫一個特殊的動畫，如果我想要一個元素同時執行2個動畫。

這是可能的...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this? 
@-webkit-keyframes FADETRICKY 
{ 
    FADE TRICKY; 
}

來源

2011-11-30 Jake M

你必須手動合併的動畫，我想。

如果你需要在幾個地方使用類似的東西，我會看看Less CSS或類似的東西，這樣你就可以使用「mixins」（例如函數）來生成css。我用它來抽象供應商特定的CSS，以便在主要的.less文件中，5或6行瀏覽器特定的代碼可以被一種方法替代。

來源

2011-11-30 05:13:48

#myEle { 
    -Webkit-animation-name: FADE,TRICKY; 
    -Webkit-animation-duration: 5s,2.5s; 
}

使用'，'沒有空間。我在Chrome版本16.0.899.0中嘗試。

來源

2011-12-01 02:28:29

此外，'-webkit-animation：FADE 5s，TRICKY 2.5s'工程。我發誓很久以前我嘗試過這個。要麼我搞砸了，或者當我嘗試時不支持它:) http://jsfiddle.net/ALBDe/ –

逗號分隔動畫爲我工作。是否可以將動畫分配給一個CSS選擇器，將另一個動畫分配給另一個選擇器，然後將這些類組合到一個元素上，如

？在Chrome 22測試版中不適合我，但也許我做錯了什麼。 – jaketrent

我想介紹不應該實現它們，'-webkit-animation-name'屬性將被覆蓋 –

有2個CSS動畫同時執行的元素

回答

相關問題