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

CSSで背景をアニメーション化する方法：@keyframesの基本と実装例

CSSでは、@keyframesルールを使うことで、要素の背景を簡単にアニメーションさせることができます。背景色や背景画像の位置・サイズなどを時間の経過とともに変化させることで、動きのある魅力的なWebページを作成できます。

@keyframesとは

@keyframesは、アニメーションの開始時点から終了時点までの途中経過（キーフレーム）を定義するためのCSSルールです。パーセンテージでアニメーションの進行度を指定し、その時点でのスタイルを記述します。

定義したキーフレームは、animationプロパティを使って要素に適用します。アニメーションの名前、再生時間、繰り返し回数などをまとめて指定できるのが特徴です。

実装例：背景をアニメーションさせる

以下のコードは、div要素の背景を3秒かけて変化させ、無限に繰り返すシンプルな例です。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 300px;
        animation: myanim 3s infinite;
      }
      @keyframes myanim {
        30% {
          background: green bottom right/50px 50px;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

コードの解説

  • animation: myanim 3s infinite; — 「myanim」という名前のアニメーションを3秒間かけて再生し、infiniteを指定することで無限に繰り返します。
  • @keyframes myanim — アニメーションの各段階におけるスタイルを定義します。この例では30%の時点で背景を緑色に変更し、位置を右下、サイズを50px×50pxに設定しています。

キーフレームのパーセンテージを追加すれば、より複雑で滑らかなアニメーションも作成可能です。0%や100%を組み合わせて、背景色だけでなくグラデーションや背景画像の移動なども表現してみましょう。

  1. CSSでフルスクリーンの動画背景を作成する方法【サンプルコード付き】

    Webサイトにインパクトのある演出を加えたいとき、フルスクリーンの動画背景は非常に効果的です。CSSを活用すれば、画面いっぱいに広がる動画背景を簡単に実装できます。ここでは、実際に動作するサンプルコードを交えて具体的な手順を解説します。 実装のポイント フルスクリーンの動画背景を実現するためには、以下のCSSテクニックが重要になります。 position: fixed：video要素を画面に対して固定配置し、right: 0 と bottom: 0 を指定して右下に配置します。 min-width / min-height：それぞれ 100% を指定することで、どの画面サイズやウィンドウ比率

  2. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l