概要
cssプロパティーtransitionをショートハンド (一括指定)を使用せず個別で指定する方法。用途
- 複数のプロパティを設定する際に使用。
- プロパティごとに時間(duration)などを指定。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
実装方法
transition-timing-functionについてはhttps://developer.mozilla.org/ja/docs/Web/CSS/transition-timing-functionを参照。CSS
セレクター {
transition-property: プロパティ1, プロパティ2;
transition-duration: (プロパティ1の変化時間)s, (プロパティ2の変化時間)s;// 秒数
transition-timing-function: (プロパティ1の進行割合), (プロパティ1の進行割合);// (初期値:ease)
transition-delay: (プロパティ1の遅延時間)s, (プロパティ2の遅延時間)s;// 秒数
}
/* 使用例 */
.selector {
transition-property: background-color, width;
transition-duration: 1.5s, 2s;
transition-timing-function: ease, ease-in-out;
transition-delay: .5s;//両方に適用
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
