CSS - tansition

• トップ
• CSSリファレンス
• tansition

概要

説明

transition 属性は、transition-property、transition-duration、transition-timing-function、transition-delay によるトランジション(遷移)に関わるパラメータをまとめて指定します。:hover を用いると、マウスを乗せた時のスタイルを指定することができますが、トランジションを用いることにより変化にかける時間などを制御することが可能となります。transition に指定する値は省略可能で順不同ですが、時間と解釈される値は一つ目が transition-duration で、二つ目が transition-delay と解釈されます。

animation によるアニメーションがページを開いた際に開始するのに対し、トランジションは、ページを開いたのちに発生する :hover などの契機で開始します。:hover の他には、:checked、:active、:target、:focus や、jQuery などで要素にクラスを追加する場合の変化にも適用されます。

none

どの属性も対象としません。

<property>

対象とする属性名を指定します。transition-property を参照してください。

<time1>

変化にかける時間を指定します。transition-duration を参照してください。

<easing-function>

変化のタイミング関数を指定します。transition-timing-function を参照してください。

<time2>

変化を開始するまでの遅延時間を指定します。transition-delay を参照してください。

使用例

トランジション を参照してください。

関連項目

リンク

• http://www.w3.org/TR/css3-transitions/#transition-shorthand-property
• https://developer.mozilla.org/ja/docs/Web/CSS/transition
• http://caniuse.com/#feat=css-transitions