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

transition-duration”プロパティ:遷移効果の所要時間CSS3で追加

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

プロパティについて

概要

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

transition-duration”プロパティは要素に適用されているプロパティの値が変化した時に遷移にかかる所要時間を指定するプロパティです。

サンプルコード

div { transition-duration: 5s;}

説明
<time> smsで遷移が完了するのにかかる所要時間を指定します (負の値は無効です。)
0s 遷移は瞬時に起こります
共通キーワード

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

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

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

仕様書

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

使用例

遷移効果の所要時間を指定する

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

瞬時に遷移する

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

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

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