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

CSSの@keyframesでbackground-positionプロパティをアニメーションさせる方法

CSSで背景画像の位置（background-position）をアニメーションさせるには、@keyframesルールを使用します。キーフレーム内でbackground-positionの値を変化させることで、背景画像を滑らかに移動させるアニメーションを実現できます。

実装のポイント

  • @keyframesを定義する： アニメーションの進行度（パーセンテージ）ごとに、background-positionの値を指定します。
  • animationプロパティを設定する： 対象要素にアニメーション名、再生時間（duration）、繰り返し回数などを指定します。無限に繰り返したい場合は infinite を使用します。
  • 初期値を明示する： 要素側にもbackground-positionを設定しておくと、アニメーション開始前の状態が明確になります。

コード例

以下のコードは、div要素の背景画像の位置をアニメーションさせる実際の例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
            }
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

コードの解説

この例では、3秒間のアニメーション「myanim」が無限に繰り返されます。アニメーションが20%進んだ時点で、背景色が黄色から暗赤色（maroon）へ変化すると同時に、背景画像の位置が左下（bottom left）から右下（bottom right）へ移動します。

background-positionはキーワード（left、right、top、bottom、center）だけでなく、ピクセルやパーセントなどの具体的な数値でも指定できるため、より細かいアニメーション制御も可能です。

  1. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します

  2. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot