CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-delayプロパティでアニメーション開始を遅らせる方法

CSSでアニメーションの開始タイミングを遅らせたい場合は、animation-delayプロパティを使用します。このプロパティに秒数（s）やミリ秒（ms）を指定することで、アニメーションが始まるまでの待ち時間を簡単に設定できます。

animation-delayの基本的な使い方

以下のコード例では、黄色いボックスが表示されてから2秒後に、背景色が緑から青へと変化するアニメーションが開始されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      background-color: yellow;
      animation-name: myanim;
      animation-duration: 2s;
      animation-delay: 2s;
    }
    @keyframes myanim {
      from {
        background-color: green;
      }
      to {
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

コードの解説

この例では、次の3つのプロパティが連携して動作しています。

  • animation-name：適用するキーフレーム（@keyframes）の名前を指定します。
  • animation-duration：アニメーション1回分の再生時間を指定します（ここでは2秒）。
  • animation-delay：アニメーション開始までの遅延時間を指定します（ここでは2秒）。

つまり、ページ読み込み後2秒間は黄色のまま待機し、その後2秒かけて緑→青へと背景色が変化します。

補足：負の値も指定できる

animation-delayには負の値（例：-1s）を指定することも可能です。負の値を設定すると、アニメーションは途中の状態から即座に再生されます。たとえば、全体の再生時間が2秒のアニメーションにanimation-delay: -1s;を指定すると、1秒経過した時点の状態からスタートします。

また、遅延中に要素が初期状態のまま見えてしまうのを防ぎたい場合は、animation-fill-mode: backwards;を併用すると、遅延期間中もキーフレームの「from」の状態を適用できます。用途に応じて使い分けると、より表現力豊かなアニメーションを実装できます。

  1. CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

    Webサイトやアプリのデザインにおいて、カード型のUIはプロフィール紹介や商品一覧など、さまざまな場面で活用される定番のレイアウトです。CSSを使えば、画像とテキストを組み合わせた洗練されたカードを簡単に作成できます。 この記事では、box-shadow（影）や :hover（ホバー時の変化）を組み合わせて、立体感のあるカードを実装する方法を解説します。 カード作成のサンプルコード 以下のコードは、画像と肩書き情報を持つシンプルなカードの例です。 <!DOCTYPE html> <html> <head> <meta name=viewport con

  2. CSSだけで作るタイプライターアニメーションの実装方法を解説

    CSSアニメーションを活用すれば、テキストが一文字ずつ打ち込まれていくような「タイプライターアニメーション」を実現できます。JavaScriptに頼らなくても、CSSのsteps()関数と@keyframesを組み合わせるだけで、この演出効果を簡単に作ることが可能です。以下に、その具体的な実装例を紹介します。タイプライターアニメーションの仕組みこのアニメーションでは、主に次のCSSテクニックを組み合わせています。steps()関数：アニメーションをなめらかに変化させるのではなく、段階的に（カクカクと）進めることで、文字が一つずつ打ち込まれるような動きを表現します。overflow: hidde