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

CSSのfont-weightプロパティでアニメーションを実行する方法

CSSで font-weight プロパティにアニメーションを適用するには、@keyframes ルールでフォントの太さの変化を定義し、animation プロパティを使って対象の要素に適用します。

実装例

以下のコードでは、段落要素に対して5秒間のアニメーションを無限に繰り返すよう設定し、アニメーションの進行が70%に達した時点で文字が太字（bold）に変化するように指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            border: 2px solid black;
            width: 400px;
            height: 100px;
            animation: myanim 5s infinite;
         }
         @keyframes myanim {
            70% {
               font-weight: bold;
            }
         }
      </style>
   </head>
   <body>
      <p>This is demo text</p>
   </body>
</html>

コードのポイント

  • animation: myanim 5s infinite; — 「myanim」という名前のアニメーションを5秒かけて無限に繰り返すよう設定しています。
  • @keyframes myanim — アニメーション途中（この例では70%の時点）で適用されるスタイルを定義します。
  • font-weight: bold; — 70%の時点で文字が太字へと変化します。

なお、font-weight のアニメーションは可変フォント（Variable Fonts）を使用すると、ウェイトが連続的かつ滑らかに変化します。従来の静的フォントの場合は、あらかじめ用意されているウェイト（例：400や700）の間でのみ変化するため、動きが段階的に見える点に注意してください。

  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まで変化します