今回は、CSSの transition-delay プロパティを使って、アニメーションのタイミングを遅らせる方法を紹介します。
transition-delay プロパティとは
transition-delay プロパティは、CSSトランジションの開始タイミングを遅らせるために使用されます。
値を秒単位で指定することで、アニメーションが開始されるまでの時間をコントロールできます。
使用方法
.class {
transition: 1s ease-out;
transition-delay: .6s; /* アニメーション開始を0.6秒遅らせる */
}
この例では、.classを持つ要素に対して、すべてのプロパティの変更に1秒かけてイージング効果を適用します。
さらに、 transition-delay: .6s; を追加することで、アニメーション開始を0.6秒遅らせています。
transition-delayの使い方
transition-delayプロパティは、次の場面で利用します。
- アニメーションの開始タイミングを調整して、より自然な動きにする
- 複数のアニメーションを組み合わせたときに、それぞれのアニメーションがスムーズに繋がるようにする
- ユーザーの操作に連動してアニメーションを開始する
具体的な使い方
アニメーションの開始タイミングを調整する
例えば、ページ読み込み時に要素をフェードインさせるアニメーションを作成する場合、transition-delayプロパティを使って、アニメーション開始を少し遅らせることで、より自然な動きにすることができます。
複数のアニメーションを組み合わせたときに、それぞれのアニメーションがスムーズに繋がるようにする
例えば、要素を移動してから回転させるアニメーションを作成する場合、transition-delayプロパティを使って、回転アニメーション開始を移動アニメーション終了後に設定することで、それぞれのアニメーションがスムーズに繋がるようにすることができます。
ユーザーの操作に連動してアニメーションを開始する
例えば、ボタンをクリックしたときに要素の色を変えるアニメーションを作成する場合、transition-delayプロパティを使って、アニメーション開始をボタンクリック後に設定することで、ユーザーの操作に連動してアニメーションを開始することができます。
transition-delayを使った例
次に、transition-delayを使ったアニメーション例を実際に触って見ていきましょう。
この例では、ボタンをホバーした際の挙動で確認することがでいます。
hoverすると0.6秒後にアニメーション
ボタン
.demo1 {
transition: 4s;
transition-delay: .6s;
}
.demo1:hover {
transform: translate(1000px, 1000px) scale(.2) rotate(4000deg);
}
hoverすると1秒後にアニメーション
ボタン
.demo2 {
transition: 4s;
transition-delay: 1s;
}
.demo2:hover {
transform: scale(.0001);
}
hoverすると4秒後にアニメーション
ボタン
.demo3 {
opacity: 0;
transform: translateY(-6px);
transition: .3s ease-out;
transition-delay: 4s;
}
.demo3:hover {
opacity: 1;
transform: translateY(0);
}
このようにtransition-delayを使って遅延処理をすることで、面白い動きをサイトに追加が可能になります。
またアクションした後に戻るアニメーションもtransition-delayの効果で遅延が発生するのが注意です！
コメント