transition:時間によって変化するトランジション効果の値をまとめて操作する

初期値 各プロパティの初期値
適用対象 全ての要素、::before::after擬似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

transitionプロパティの説明

transitionは、時間によって変化するトランジション効果の値をまとめて操作します。トランジション(transition)は、ある状態とある状態の2つのスタイルを持つ要素に対して、変化にかかる時間やタイミング、タイムラインの推移などを加えるものです。

状態の変化を開始するトリガーは、ユーザーの操作に反応する擬似クラスや、JavaScriptによって定義します。2点以上に渡る状態の変化を表す場合は、animationの方を活用して下さい。transitionは、あくまで特定の条件で発動する2点間の変化に時間経過を加えるものです。

本プロパティは、transition-propertytransition-durationtransition-delaytransition-timing-functionの値を一括で操作するショートハンド・プロパティです。

transitionに指定できる値

none
トランジションの内容を無効にするキーワードです。
all
トランジションの内容を変化するプロパティ全てに適用するキーワードです。
<custom-ident>
トランジションの効果を適用するCSSのプロパティ名です。詳細はtransition-propertyを参照して下さい。
<time>
時間を表す値です。1つ目の値は、トランジションが完了するまでの時間を表すtransition-durationに割り当てられます。2つ目の値は、トランジションが開始されるまでの待ち時間を表すtransition-delayに割り当てられます。
<easing-function>
トランジションの変化の速度を表す値です。詳細はtransition-timing-functionを参照して下さい。

transitionの使い方とサンプル

transitionプロパティの構文は以下の通りです。

CSS
/* プロパティ | 所要時間 */
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属性に対応している環境で有効です。

表示確認
CSS
.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;}
HTML
<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>

transitionに関連するCSSプロパティ

トランジション
transition 時間によって変化するトランジション効果の値をまとめて操作する
transition-delay トランジションが開始する前の待ち時間を指定する
transition-duration トランジションが開始してから終了するまでの時間を指定する
transition-property トランジションの対象となるプロパティを指定する
transition-timing-function トランジションが開始してから終了するまでの変化の遷移を指定する