2011-10-21 9 views
0

WebKitトランジションを使用して特定のCSS変更をアニメーションしています。
たとえば、誰かが移動すると緑色に変更したい赤いボックスがあるとします。私はこれを使用します:WebKitのトランジション/アニメーションを使用して異なるプロパティの継続時間が異なる

-webkit-transition-duration: 200ms; 
-webkit-transition-property: background; 
-webkit-transition-timing-function: ease; 

それは素晴らしいです。しかし、今、私はそれがまた下にスライドすることを望むと言う。私はこれを使用します。また、大丈夫動作しますが、私はボックス(50ミリ秒を言う)素早くスライドダウンしたい

-webkit-transition-property: background, margin; 

。私は-durationを変更することができません。なぜなら、色をアニメーション化するのが速くなるからです。

どのようにCSSアニメーションのさまざまなプロパティに異なる期間を割り当てることができますか?
必要に応じてキーフレームアニメーションを使用しても問題はありませんが、私は彼らが私を助ける方法を見ていません。

jsfiddle for reference

答えて

6

Duratonsは、カンマで区切られた遷移特性に対応することができる、すなわち:

-webkit-transition-duration: 50ms, 200ms; 
-webkit-transition-property: margin, background; 

http://jsfiddle.net/bQ8d7/1/

関連する問題