属性名 | tansition |
---|---|
値 | <single-transition> [, <single-transition>]* |
値の詳細 | <single-transition> = [ none | <property> ] || <time1> || <function> || <time2> |
初期値 | 個々の属性を参照 |
適用可能要素 | すべての要素 (::before, ::after を含む) |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10 | 4(-moz) 16 | 1.0(-webkit) 26 | 11.5(-o) 12.1 | 3.1(-webkit) 6.1 |
transition 属性は、transition-property、transition-duration、transition-timing-function、transition-delay によるトランジション(遷移)に関わるパラメータをまとめて指定します。:hover を用いると、マウスを乗せた時のスタイルを指定することができますが、トランジションを用いることにより変化にかける時間などを制御することが可能となります。transition に指定する値は省略可能で順不同ですが、時間と解釈される値は一つ目が transition-duration で、二つ目が transition-delay と解釈されます。
animation によるアニメーションがページを開いた際に開始するのに対し、トランジションは、ページを開いたのちに発生する :hover などの契機で開始します。:hover の他には、:active、:target、:focus、:checked や、jQuery などで要素にクラスを追加する場合の変化にも適用されます。
値 | 説明 |
---|---|
none | どの属性も対象としません。 |
<property> | 対象とする属性名を指定します。transition-property を参照してください。 |
<time1> | 変化にかける時間を指定します。transition-duration を参照してください。 |
<function> | 変化のタイミング関数を指定します。transition-timing-function を参照してください。 |
<time2> | 変化を開始するまでの遅延時間を指定します。transition-delay を参照してください。 |
下記の例では、:hover によって width が変化するのを、0.2秒で変化するように指定しています。
.test { width: 100px; height: 30px; background: #f66; transition: 0.2s; } .test:hover { width: 300px; }
<div class="test"></div>
下記の様にカンマで複数指定することで、width は 0.2秒、height は 0.4秒で変化させることもできます。
transition: width 0.2s, height 0.4s;