特定のCSSの変更をアニメーション化するためにWebKitトランジションを使用しています。
たとえば、誰かがホバリングしたときに緑色に変更したい赤いボックスがあるとします。私はこれを使用します:
-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;
それはうまくいきます。しかし、今、私はそれも少し下にスライドさせたいと言います。私はこれを使用します:
-webkit-transition-property: background, margin;
それも問題なく機能しますが、ボックスをすばやく下にスライドさせたい(たとえば50ミリ秒)。-duration
色のアニメーションが速くなるので、変更できません。
CSSアニメーションのさまざまなプロパティにさまざまな期間を割り当てるにはどうすればよいですか?
必要に応じてキーフレームアニメーションを使用しても問題ありませんが、キーフレームアニメーションが役立つ方法は見当たりません。