CSSプロパティ transition-delay：CSSアニメーションの遅延再生を制御する
transition-delay プロパティは、CSSトランジション効果が開始されるまでの遅延時間を定義します。 遅延を設定することで、より複雑で面白いアニメーション効果を作成できます。たとえば、ある要素が別のアニメーションの完了後に独自のアニメーションを開始させることができます。
1. 構文と値
- このプロパティは、カンマ区切りの1つ以上の時間値を受け取ります。
- 時間値には、秒（s）またはミリ秒（ms）を使用できます。
- 例：
transition-delay: 2s;またはtransition-delay: 500ms, 1s; - 負の値は、トランジション効果がアニメーションシーケンス内の指定された時点から再生されることを意味します。
2. transition-delayの使用方法
transition-property、transition-duration、およびtransition-timing-functionプロパティと組み合わせて使用して、完全なトランジション効果を作成します。- 例：
transition: width 2s ease-in-out 1s;このコードは、要素の幅が1秒の遅延後に遷移を開始し、遷移プロセスが2秒間続き、ease-in-outの時間関数を使用することを示しています。
3. 複数値の適用
transition-delayプロパティに複数の時間値が設定されている場合、それらはtransition-propertyプロパティで定義されている個々のトランジション効果に1対1で対応します。- 時間値の数が遷移効果の数よりも少ない場合は、時間値が繰り返されます。
4. 例
HTMLコード:
<div class="box"></div>
<div class="box-delayed"></div>
CSSコード:
.box, .box-delayed {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.box {
transition: width 2s ease-in-out;
}
.box-delayed {
transition: width 2s ease-in-out 1s;
}
.box:hover, .box-delayed:hover {
width: 200px;
}
効果:
上のコードでは、2つの赤いボックスがあります。最初のボックスは、マウスをホバーするとすぐに幅が遷移します。2番目のボックスは、transition-delay プロパティに1秒の遅延が設定されているため、マウスをホバーしてから1秒後に幅の遷移が開始されます。
5. 負の遅延値
transition-delay に負の値を指定すると、トランジションはあたかもすでに指定された時間だけ実行されているかのように開始されます。たとえば、transition-delay: -1s; と指定すると、トランジションは1秒前から開始されたかのように、途中から開始されます。
6. ブラウザのサポート
transition-delay プロパティは、すべての主要なブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合があります。
| ブラウザ | バージョン |
|---|---|
| Chrome | 26+ |
| Firefox | 16+ |
| Safari | 6+ |
| IE | 10+ |
| Edge | 12+ |
| Opera | 12+ |
まとめ
transition-delay プロパティは、CSSアニメーションの再生順序を制御するための非常に高い柔軟性を提供します。 遅延時間を設定することで、より複雑で魅力的なアニメーション効果を作成し、ユーザーエクスペリエンスを向上させることができます。
参考文献
よくある質問
Q1: transition-delay と animation-delay の違いは何ですか？
transition-delay は、ユーザーのアクション（例：ホバー）によってトリガーされるトランジションの遅延を設定します。一方、animation-delay は、CSSアニメーションの開始を遅らせます。
Q2: 複数のトランジションに異なる遅延時間を設定できますか？
はい、できます。transition-delay プロパティに複数の値を指定することで、それぞれのトランジションに異なる遅延時間を設定できます。
Q3: 遅延時間を動的に変更できますか？
はい、JavaScriptを使用して、transition-delay プロパティの値を動的に変更できます。