同時に2つのCSSアニメーションが実行される要素を持つ

Question

私はWebKitsアニメーションを試しています。

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; 
} 

Answer 1

あなたが手動でアニメーションをマージする必要があります

、私が思う...このことが可能です。

このようなものをいくつかの場所で使用する必要がある場合は、Less CSSまたはそれに類するものを参照してください。「mixins」（例：関数）を使用してCSSを生成できます。私はベンダー固有のCSSを抽象化するために使います。そのため、メインの無限のファイルでは、ブラウザ固有のコードの5行または6行を1つの方法で置き換えることができます。

Answer 2

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

'、'スペースを使用しないでください。私はChromeバージョン16.0.899.0で試してみました。