【CSS3】transition でプロパティを複数指定する書き方
CSS3 の transition（トランジション）で複数のプロパティを指定する方法です。
この書き方をすることでプロパティごとに時間変化を細かく設定できます。
transition プロパティとは
時間変化をする transition に関連したプロパティをまとめて書けるショートハンドです。 以下のプロパティをまとめて書くことができます。
transition-property
トランジション効果 を適用する CSS プロパティの名称 を指定
デフォルトは all なので、記述しない場合すべてのプロパティに適用されます。
transition-duration
トランジションによるアニメーションが 完了するまでの時間
デフォルトは 0s なので、記述しない場合アニメーションはしません。
単位は秒 s またはミリ秒 ms で記述します。
transition-timing-function
トランジションの 中間状態 を指定
デフォルトは ease
transition-delay
トランジションがはじまるまでの 待ち時間
デフォルトは 0s なので、記述しない場合は待ち時間はありません。
単位は秒 s またはミリ秒 ms で記述します。
記述例
CSS プロパティ transition-property と 時間 transition-duration を設定したときの記述例です。
transition: 0.3s;すべてのプロパティ（デフォルト値allが入る）を 0.3s で時間変化する。transition: all 0.3s;すべてのプロパティを 0.3s で時間変化する。transition: opacity 0.3s;透明度だけ 0.3s で時間変化する
複数のプロパティを指定して時間変化させたい
プロパティごとにカンマ区切りしながらひとつずつ指定する。
transition: [プロパティ1] [時間変化1], [プロパティ2] [時間変化2], [プロパティ3] [時間変化3];
transition: border-width 0.1s, top 0.1s;
サンプル
ボタンのスタイルです。
- 線幅
border-width - 位置
top
だけ時間変化させたい。
背景 background は時間変化させないものです。
.btn {
/* 複数で指定する時はカンマ区切り */
transition: border-width 0.1s, top 0.1s;
border-bottom: 3px solid #444;
top: 0;
background: #fff;
}
.btn:hover {
border-width: 0;
top: 3px;
}
.btn:active {
/* 背景は時間変化していない */
background: #f2f2f2;
}
複数のプロパティを指定しない書き方
.btn {
transition: 0.1s;
...
}
複数のプロパティを指定しない書き方だと、all が補完され、すべてのプロパティが時間変化します。
このサンプルの場合だとボタンを押したときの背景 background もアニメーション付きで変化します。
hover に transtion を設定した場合
.btn:hover {
transition: 0.1s;
border-width: 0;
top: 3px;
}
上記のように hover に transtion を設定した場合はカーソルが離れたときの動きが時間変化しなくなってしまいます。
参考
べころもち工房 Works
フリーランスとして仕事を始めました
2018年4月よりお仕事募集中です。内容は HTML/CSS コーディングやイラスト作成です。 お問合わせは Twitter からどうぞ。
Web 技術系同人誌
Vue.js の SPA でポートフォリオサイトを作ったときの制作記。HTML/CSSがひと通りわかっていて、JSが少し書ける方向けです。2017年10月の時点で最新の内容です。
