このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

transition-delay”プロパティ:遷移効果の遅延時間CSS3で追加

記事Aug. 30th,2021
遷移を開始するまでの遅延時間を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 transition-delay: ease;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した所要時間をアイテムとするリスト
アニメーション 不可

transition-delay”プロパティはtransition-duration”プロパティなどで指定された要素に適用されているプロパティの値が変化した時に遷移が開始するまでの遅延時間を指定するプロパティです。

サンプルコード

div { transition-delay: 5s;}

説明
<time> smsで遷移が開始するまでの遅延時間を指定します (負の値を指定した場合、遷移はすぐに開始されますが、指定された時間が経過した時点から遷移が開始します。)
0s 遷移はすぐに開始されます
共通キーワード

複数のプロパティの遷移効果を指定する

transition-property”プロパティで複数のプロパティの遷移効果が指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれの遷移を開始するまでの遅延時間を指定することができます。値の順番はtransition-property”プロパティで指定した値の順番に対応します。

div {
transition-duration: 〚1個目のプロパティの所要時間〛,〚2個目のプロパティの所要時間〛,〚3個目のプロパティの所要時間〛,...;
transition-property: 〚1個目のプロパティ〛,〚2個目のプロパティ〛,〚3個目のプロパティ〛,...;
transition-delay: 〚1個目のプロパティの遅延時間〛,〚2個目のプロパティの遅延時間〛,〚3個目のプロパティの遅延時間〛,...;
}

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
transition-delay
定義あり

使用例

遷移効果の遅延時間を指定する

.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-delay: 5s;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-delay: 10s;
}
hover!
.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-delay: 0s;
}
hover!

遷移効果を途中から開始する

.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-duration: 3s;
transition-delay: -1.5s;
}
hover!

複数のプロパティの遷移効果を指定する

.sample-box:hover {
transform: scale(1.5);
background-color: #e95295;
transition-property: transform, background-color;
transition-duration: 3s, 3s;
transition-delay: 2s, 0s;
}
hover!
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク