transition-durationプロパティは、CSSトランジションが実行される時間を指定します。このプロパティを使用することで、ホバーなどの操作に対するエフェクトがどのくらいの時間で完了するかを調整できます。トランジションとはマウス、カーソルが重なった時に動作するアニメーションです。
INDEX
transition-durationの値とその効果の一覧
- 0s: トランジションは即座に完了し、遷移効果はありません。
- 1s: 1秒でトランジションが完了します。
- 2s: 2秒でトランジションが完了します。
注意点と関連情報
遷移時間は秒(s)やミリ秒(ms)で指定できます。短すぎるとトランジションが見えにくく、長すぎるとユーザーが待たされる感覚がありますので、使用シーンに応じて適切な時間を設定しましょう。
transition-durationが効かない時の原因と対策
transitionプロパティが正しく設定されていない
transition-durationは、トランジション（変化）の時間を指定するプロパティですが、transitionプロパティが設定されていない場合、transition-durationは機能しません。transition-durationは、transitionが適用されたときにのみ効果を発揮します。
対策: transitionプロパティを正しく設定します。例えば、transition: all 0.5s ease;やtransition: opacity 0.5s ease;のように、どのプロパティに対してトランジションを適用するかを明示します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 0 auto;
transition: transform 1s;
}
.css-sample-box:hover {
transform: scale(1.5);
}transition-duration: 0s
トランジションが即座に完了し、視覚的な遷移はありません。マウスを重ねて確認してください。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-duration-0s"></div>
</div>CSSコード
.css-sample-duration-0s {
transition-duration: 0s;
}表示結果
transition-duration: 1s
1秒かけてトランジションが完了します。ホバーすると1秒かけてボックスが拡大します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-duration-1s"></div>
</div>CSSコード
.css-sample-duration-1s {
transition-duration: 1s;
}表示結果
transition-duration: 2s
2秒かけてトランジションが完了します。ホバーすると2秒かけてボックスが拡大します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-duration-2s"></div>
</div>CSSコード
.css-sample-duration-2s {
transition-duration: 2s;
}表示結果
まとめ
- transition-durationプロパティは、CSSトランジションが完了するまでの時間を設定します。
- トランジション時間は秒(s)またはミリ秒(ms)で指定できます。
- 値が「0s」の場合、遷移は瞬時に完了し、エフェクトはありません。
- 遷移時間を長くすると、トランジションがよりゆっくりと行われますが、ユーザーが待たされる可能性があります。