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

CSSのtext-decoration-colorプロパティで下線の色をアニメーションさせる方法

CSSのtext-decoration-colorプロパティは、テキストに表示される下線・上線・取り消し線などの装飾線の色を個別に指定できるプロパティです。この値を@keyframesと組み合わせて変化させることで、下線の色が滑らかに移り変わるアニメーション効果を実現できます。

実装例：text-decoration-colorのアニメーション

以下のコードでは、青い背景のボックスを右へ移動させながら、同時に下線の色をオレンジ色へと変化させています。animationプロパティで「3秒間・無限ループ」の設定にしているため、アニメーションは繰り返し再生されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo {
        position: absolute;
        right: 0;
        width: 300px;
        height: 200px;
        background-color: blue;
        text-decoration: underline;
        text-decoration-color: white;
        animation: myanim 3s infinite;
      }
      @keyframes myanim {
        30% {
          right: 350px;
          text-decoration-color: orange;
        }
      }
    </style>
  </head>
  <body>
    <h1>CSS text-decoration-color プロパティ</h1>
    <div id = "demo">
      <h1>これはデモ用のテキストです。</h1>
    </div>
  </body>
</html>

コードのポイント

  • @keyframes myanim … アニメーションの進行度30%の時点での状態を定義しています。ここで要素の位置（right: 350px）と下線の色（text-decoration-color: orange）を同時に指定することで、2つの変化が連動します。
  • animation: myanim 3s infinite; … 名前がmyanimのキーフレームを3秒かけて再生し、終了後も繰り返します。
  • text-decoration: underline; … 対象テキストに下線を表示する設定です。実際の色の変化はtext-decoration-colorが担当します。

活用のヒント

text-decoration-colorはリンクホバー時の演出にも便利です。例えば、マウスオーバーした際に下線の色がゆっくり変化するようなデザインは、transitionとの組み合わせでも簡単に実装できます。ただし、古いブラウザでは対応していない場合があるため、必要に応じてベンダープレフィックスやフォールバックのスタイルを検討してください。

  1. CSSでz-indexプロパティをアニメーションさせる方法

    CSSでは、z-indexプロパティもアニメーションの対象にできます。@keyframesルールの中でz-indexの値を段階的に変化させることで、要素の重なり順序を時間の経過とともに動的に変更できます。以下のコードを実行して、その動作を確認してみましょう。サンプルコード<!DOCTYPE html> <html>    <head>       <style>         

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

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素