transitionプロパティの説明
CSSのtransitionプロパティは、時間によって変化するトランジション効果の値をまとめて操作します。トランジション（transition）は、ある状態とある状態の2つのスタイルを持つ要素に対して、変化にかかる時間やタイミング、タイムラインの推移などを加えるものです。
状態の変化を開始するトリガーは、ユーザーの操作に反応する擬似クラスや、JavaScriptによって定義します。2点以上に渡る状態の変化を表す場合は、animationの方を活用して下さい。transitionは、あくまで特定の条件で発動する2点間の変化に時間経過を加えるものです。
本プロパティは、transition-property、transition-duration、transition-delay、transition-timing-functionの値を一括で操作するショートハンド・プロパティです。
transitionに指定できる値
none- トランジションの内容を無効にするキーワードです。
all- トランジションの内容を変化するプロパティ全てに適用するキーワードです。
<custom-ident>- トランジションの効果を適用するCSSのプロパティ名です。詳細は
transition-propertyを参照して下さい。 <time>- 時間を表す値です。1つ目の値は、トランジションが完了するまでの時間を表す
transition-durationに割り当てられます。2つ目の値は、トランジションが開始されるまでの待ち時間を表すtransition-delayに割り当てられます。 <easing-function>- トランジションの変化の速度を表す値です。詳細は
transition-timing-functionを参照して下さい。
transitionの使い方とサンプルコード
transitionプロパティの構文は以下の通りです。
/* プロパティ | 所要時間 */
transition: background-color 3s;
/* プロパティ | 所要時間 | 遅延時間 */
transition: color 3s 1s;
/* プロパティ | 所要時間 | イージング */
transition: font-size 3s ease-in;
/* プロパティ | 所要時間 | イージング | 遅延時間 */
transition: width 500ms linear 1s;
/* 2つのプロパティに適用 */
transition: width 1s, height 2s;
/* 全ての変化するプロパティに適用 */
transition: all 1.5s ease-out;
/* グローバル値 */
transition: inherit;
transition: initial;
transition: revert;
transition: unset;
transitionの実例
それでは実際にtransitionプロパティの書き方を見ていきましょう。以下の例は、マウスポインタが重なった時にプロパティが変化するボックスの挙動です。各プロパティの初期値は共通ですが、変化した後の値を変えているため異なる結果を表示します。
スマートフォンやタブレットで閲覧している場合は、色のついたボックスをタッチすることで条件が発動します。この機能は、要素にontouchstart属性に対応している環境で有効です。
<div class="samp_box">
<section>
<h1>transition: margin 1s;</h1>
<div id="ts_1" ontouchstart>Item</div>
</section>
<section>
<h1>transition: background-color 1s ease-out;</h1>
<div id="ts_2" ontouchstart>Item</div>
</section>
<section>
<h1>transition: padding 1s, border 2s;</h1>
<div id="ts_3" ontouchstart>Item</div>
</section>
<section>
<h1>transition: all 2s steps(4, jump-none);</h1>
<div id="ts_4" ontouchstart>Item</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
padding: 0;
font-size: 1rem;
font-weight: normal;
}
section > div {
margin: 1rem 0 0;
padding: 1rem;
border: 1px solid #000;
background-color: #09f;
color: #fff;
text-align: center;
cursor: pointer;
}
#ts_1 {
transition: margin 1s;
} #ts_1:hover { margin: 1rem 3rem 0;}
#ts_2 {
transition: background-color 1s ease-out;
} #ts_2:hover { background-color: #f90;}
#ts_3 {
transition: padding 1s, border 2s;
} #ts_3:hover { padding: 0; border: 1rem solid #fc0;}
#ts_4 {
transition: all 2s steps(4, jump-none);
} #ts_4:hover { padding: 0 1rem; border: 1rem dashed #f09; background-color: #fff; color: #09f;}