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

CSSのbackground-colorプロパティでアニメーションを実装する方法

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

CSSでは、@keyframesルールとanimationプロパティを組み合わせることで、background-color（背景色）プロパティにアニメーションを適用できます。背景色はアニメーション可能なプロパティの一つであり、ある色から別の色へと滑らかに変化させることが可能です。

以下の例では、黄色いdiv要素が3秒間かけて暗赤色（maroon）へと変化するアニメーションを無限に繰り返します。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 400px;
            height: 300px;
            background: yellow;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
            }
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

コードの解説

  • animation: myanim 3s infinite; — 「myanim」という名前のアニメーションを3秒間かけて実行し、無限に繰り返すよう指定しています。
  • @keyframes myanim — アニメーションの進行に応じたスタイルの変化を定義するルールです。
  • 20% { background-color: maroon; } — アニメーション時間の20%が経過した時点で、背景色がmaroon（暗赤色）になることを示しています。

このHTMLファイルをブラウザで開くと、div要素の背景色が黄色から暗赤色へと滑らかに遷移し、そのアニメーションが繰り返し再生される様子を確認できます。キーフレームの割合（%）やアニメーションの duration を変更することで、色の変化のタイミングや速度を自由に調整できます。

  1. CSSのperspectiveプロパティをアニメーションさせる方法を解説

    CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ

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

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