<style media="screen">.cp_trans {border-radius: 6px;height: 60px;line-height: 60px;text-align: center;color: #ffffff;cursor: pointer;}.cp_ease {background: #29b6f6;width: 100px;transition: background 1s ease,width 1s ease;}.cp_ease:hover {background: #f06292;width: 200px;}.cp_linear {background: #29b6f6;width: 100px;transition: background 1s linear,width 1s linear;}.cp_linear:hover {background: #f06292;width: 200px;}.cp_ease-in {background: #29b6f6;width: 100px;transition: background 1s ease-in,width 1s ease-in;}.cp_ease-in:hover {background: #f06292;width: 200px;}.cp_ease-out {background: #29b6f6;width: 100px;transition: background 1s ease-out,width 1s ease-out;}.cp_ease-out:hover {background: #f06292;width: 200px;}.cp_ease-in-out {background: #29b6f6;width: 100px;transition: background 1s ease-in-out,width 1s ease-in-out;}.cp_ease-in-out:hover {background: #f06292;width: 200px;}.cp_step-start {background: #29b6f6;width: 100px;transition: background 1s step-start,width 1s step-start;}.cp_step-start:hover {background: #f06292;width: 200px;}.cp_step-end {background: #29b6f6;width: 100px;transition: background 1s step-end,width 1s step-end;}.cp_step-end:hover {background: #f06292;width: 200px;}.cp_steps {background: #29b6f6;width: 100px;transition: background 3s steps(3,end),width 3s steps(3,end);}.cp_steps:hover {background: #f06292;width: 200px;}.cp_cubic-bezier {background: #29b6f6;width: 100px;transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);}.cp_cubic-bezier:hover {background: #f06292;width: 200px;}</style>transitionで指定するプロパティは以下になります。
transition-property:トランジションを適用するプロパティ
transition-duration:トランジションにかける時間
transition-timing-function:トランジション実行中の変更速度
transition-delay:トランジション実行やプロパティ変更の際の待ち時間
<h4>transition-property:トランジションを適用するプロパティを指定</h4>
<table><tr><th colspan="2">background</th></tr><tr><td>background-color</td><td>background-position</td></tr><tr><td>border-bottom-color</td><td>border-bottom-width</td></tr><tr><th colspan="2">border</th></tr><tr><td>border-left-color</td><td>border-left-width</td></tr><tr><td>border-right-color</td><td>border-right-width</td></tr><tr><td>border-spacing</td><td>border-top-color</td></tr><tr><td>border-top-width</td><td>outline-color</td></tr><tr><td>outline-width</td><td> </td></tr><tr><th colspan="2">position</th></tr><tr><td>top</td><td>bottom</td></tr><tr><td>right</td><td>left</td></tr><tr><th colspan="2">font/text</th></tr><tr><td>font-size</td><td>font-weight</td></tr><tr><td>word-spacing</td><td>letter-spacing</td></tr><tr><td>line-height</td><td>color</td></tr><tr><td>text-shadow</td><td>text-indent</td></tr><tr><th colspan="2">margin/padding/size</th></tr><tr><td>margin-top</td><td>margin-bottom</td></tr><tr><td>margin-right</td><td>margin-left</td></tr><tr><td>width</td><td>height</td></tr><tr><td>min-height</td><td>max-height</td></tr><tr><td>max-width</td><td>min-width</td></tr><tr><td>padding-top</td><td>padding-bottom</td></tr><tr><td>padding-right</td><td>padding-left</td></tr><tr><th colspan="2">other</th></tr><tr><td>visibility</td><td>opacity</td></tr><tr><td>clip</td><td>vertical-align</td></tr><tr><td>z-index</td><td> </td></tr></table>
<h4>transition-duration:トランジションにかける時間</h4>・初期値は[0s]
<h4>transition-timing-function:トランジション実行中の変更速度を指定</h4>*[:hover]で確認できます。
基本的な動きは、[background:#29b6f6;][width:100px;]のboxを[:hover]キッカケで1秒かけて[background:#f06292;][width:200px;]に変更します。
<table><tr><th>transition-timing-functionプロパティの値</th></tr><tr><td>▼<strong>ease</strong>:cubic-bezier(0.25, 0.1, 0.25, 1.0) と同様（開始と完了を滑らかにする）（初期値）</td></tr><tr><td><div class="cp_trans cp_ease">ease</div>transition: background 1s ease,width 1s ease;</td></tr><tr><td>▼<strong>linear</strong>:cubic-bezier(0.0, 0.0, 1.0, 1.0) と同様（一定）</td></tr><tr><td><div class="cp_trans cp_linear">linear</div>transition: background 1s linear,width 1s linear;</td></tr><tr><td>▼<strong>ease-in</strong>:cubic-bezier(0.42, 0, 1.0, 1.0) と同様（ゆっくり始まる）</td></tr><tr><td><div class="cp_trans cp_ease-in">ease-in</div>transition: background 1s ease-in,width 1s ease-in;</td></tr><tr><td>▼<strong>ease-out</strong>:cubic-bezier(0, 0, 0.58, 1.0) と同様（ゆっくり終わる）</td></tr><tr><td><div class="cp_trans cp_ease-out">ease-out</div>transition: background 1s ease-out,width 1s ease-out;</td></tr><tr><td>▼<strong>ease-in-out</strong>:cubic-bezier(0.42, 0, 0.58, 1.0) と同様（ゆっくり始まってゆっくり終わる）</td></tr><tr><td><div class="cp_trans cp_ease-in-out">ease-in-out</div>transition: background 1s ease-in-out,width 1s ease-in-out;</td></tr><tr><td>▼<strong>step-start</strong>:通常のhoverの動きおよびsteps(1, start)と同様（瞬時に始まって終わる）</td></tr><tr><td><div class="cp_trans cp_step-start">step-start</div>transition: background 1s step-start,width 1s step-start;</td></tr><tr><td>▼<strong>step-end</strong>:steps(1, end)と同様（transition-durationの時間だけ待って実行）</td></tr><tr><td><div class="cp_trans cp_step-end">step-end</div>transition: background 1s step-end,width 1s step-end;</td></tr><tr><td>▼<strong>steps(数値, start or end)</strong>:ステップ数（数値）で等分に区切り実行。ステップ数は正の整数で指定</td></tr><tr><td><div class="cp_trans cp_steps">steps</div>transition: background 3s steps(3,end),width 3s steps(3,end);
サンプルはtransition-duration:3s steps(3,end)で設定（3秒間で3ステップで変化）
transition-duration:3sで設定した時のステップタイミング
steps(3,start)の場合:0s,1s,2sのタイミングで変化
steps(3,start)の場合:1s,2s,3sのタイミングで変化</td></tr><tr><td>▼<strong>cubic-bezier(数値, 数値, 数値, 数値)</strong>:3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定</td></tr><tr><td><div class="cp_trans cp_cubic-bezier">cubic-bezier</div>transition: background 1s cubic-bezier(.17,.89,.32,1.28),width 1s cubic-bezier(.17,.89,.32,1.28);
cubic-bezierの指定は<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a>での編集が簡単です</td></tr></table>
<h4>transition-delay:トランジション実行やプロパティ変更の際の待ち時間を指定</h4>指定した秒数だけ、イベントの発生を遅らせます。
transition-delay:1sであれば1秒間は実行されない。
<h4>transition（ショートハンド）:上記4プロパティのショートハンド</h4><span class="pink-line">transition:transition-property transition-duration transition-timing-function transition-delay;</span>
<strong>ex)background-colorを0.3sかけて[ease]で動かす。ただし1sは実行しない。</strong>
<span class="blue-line">transition:background-color 0.3s ease 1s;</span>
<strong>ex)backgroundを0.3sかけて[ease]で動かし、heightも0.3sかけて[ease]で動かす。</strong>
<span class="blue-line">transition:background 0.3s ease,height 0.3s ease;</span>
