transition

このエントリーをはてなブックマークに追加

transitionはトランジションアニメーションに関する指定が可能なプロパティです。

transitionはtransition-delaytransition-timing-functiontransition-durationtransition-propertyをまとめて指定できるショートハンドプロパティです。

transition : width 400ms ease 400ms;

各値は省略可能ですが、時間の指定は順番が重要です。最初に指定された時間をトランジションアニメーションの時間(transition-duration)、2番目に指定された時間がトランジションアニメーションの遅延時間(transition-delay)として採用されます。

transition : 200ms 300ms;

このような指定ではtransition-durationが200ms、transition-delayが300msとして採用されます。

複数の要素に異なるアニメーションを指定したい場合は,(カンマ)区切りで指定できます。

transition :width 200ms ,height 300ms;

このような指定ではwidthを200msでheightを300msでアニメーションさせます。

古いブラウザでは「-webkit-」や「-moz-」、「-o-」といったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。

-webkit-transition : width 400ms ease 400ms;
-moz-transition : width 400ms ease 400ms;
-o-transition : width 400ms ease 400ms;
transition : width 400ms ease 400ms;

参考URL

2.5. The ‘transition’ Shorthand Property - W3C

登録日 : 2013年07月15日 最終更新日 : 2013年7月15日

同じカテゴリー(Transition)のエントリー

検索

スポンサードリンク

バージョン

リファレンス