cssのtransitionタイミングを遅らせる方法

この記事は約3分で読めます。

今回は、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プロパティは、次の場面で利用します。

  1. アニメーションの開始タイミングを調整して、より自然な動きにする
  2. 複数のアニメーションを組み合わせたときに、それぞれのアニメーションがスムーズに繋がるようにする
  3. ユーザーの操作に連動してアニメーションを開始する

具体的な使い方

アニメーションの開始タイミングを調整する

例えば、ページ読み込み時に要素をフェードインさせるアニメーションを作成する場合、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の効果で遅延が発生するのが注意です!

コメント

タイトルとURLをコピーしました