0

特定のCSSの変更をアニメーション化するためにWebKitトランジションを使用しています。
たとえば、誰かがホバリングしたときに緑色に変更したい赤いボックスがあるとします。私はこれを使用します:

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

それはうまくいきます。しかし、今、私はそれも少し下にスライドさせたいと言います。私はこれを使用します:

-webkit-transition-property: background, margin;

それも問題なく機能しますが、ボックスをすばやく下にスライドさせたい(たとえば50ミリ秒)。-duration色のアニメーションが速くなるので、変更できません。

CSSアニメーションのさまざまなプロパティにさまざまな期間を割り当てるにはどうすればよいですか?
必要に応じてキーフレームアニメーションを使用しても問題ありませんが、キーフレームアニメーションが役立つ方法は見当たりません。

参考のためのjsfiddle

4

1 に答える 1

6

デュラトンは、遷移されたプロパティに対応して、コンマで区切ることができます。

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

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

于 2011-10-21T22:00:04.710 に答える