Zenn
💬

複数行もOK！2行以上のインライン要素のunderlineをアニメーションさせる方法

2024/11/09に公開
CSS
HTML
tech

CSSで複数行のテキストに対してunderlineアニメーションを実装する方法を解説します。従来、複数行のインライン要素に対するアニメーション付きunderlineの実装は困難とされてきましたが、CSS backgroundプロパティを活用することで実現可能です。

実装のポイント

  1. display: inlineの使用
  2. backgroundプロパティによる下線の表現
  3. linear-gradientを使用したアニメーション効果
  4. 適切なtransitionの設定

基本的な実装

/* ベーススタイル */
.hvr-underline {
  display: inline;
  background: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;
  transition: all 0.5s ease-out;
}

アニメーションパターン

1. 左からのunderline

/* 初期状態 */
.hvr-underlineInLeft {
  background-position: 0% 100%;
  background-size: 0% 1px;
}

/* hover時 */
@media (any-hover: hover) {
  .hvr-underlineInLeft:is(:hover, :focus) {
    background-size: 200% 1px;
  }
}

2. フェードインするunderline

/* 初期状態 */
.hvr-underlineFadeIn {
  background-position: 50% 30px;
  background-size: 200% 20px;
}

/* hover時 */
@media (any-hover: hover) {
  .hvr-underlineFadeIn:is(:hover, :focus) {
    background-position: 50% 20px;
    background-size: 200% 1px;
  }
}

3. 中央からのunderline

/* 初期状態 */
.hvr-underlineOpenIn {
  background-position: 50% 100%;
  background-size: 0% 1px;
}

/* hover時 */
@media (any-hover: hover) {
  .hvr-underlineOpenIn:is(:hover, :focus) {
    background-size: 200% 1px;
  }
}

HTML実装例

<a href="#" class="link">
  <span class="hvr-underlineInLeft">
    これは2行以上の<br>
    テキストです
  </span>
</a>

実装時の注意点

1. Flexbox環境での注意

親要素がdisplay: flexやdisplay: inline-flexの場合、underlineアニメーションが正しく表示されない場合があります。この場合は以下のような対応が必要です：

  • 親要素のflexを解除する
  • 別の要素構造を検討する

2. 単位の統一

アニメーション時の不自然な動きを防ぐため、background-positionとbackground-sizeでは単位を統一することが推奨されます：

/* 良い例：pxで統一 */
background-position: 50% 30px;
background-size: 200% 20px;

/* 避けるべき例：%とpxの混在 */
background-position: 0 200%;
background-size: 200% 1px;

3. グラデーションの設定

滑らかなアニメーション効果を得るために、linear-gradientの値は以下のように設定します：

/* 推奨される設定 */
background: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;

/* 避けるべき設定（急激な変化） */
background: linear-gradient(to top, currentColor 1px, transparent 1px) no-repeat;

ブラウザ対応

この実装は以下のモダンブラウザで動作確認されています：

  • Chrome（最新版）
  • Firefox（最新版）
  • Safari（最新版）
  • Edge（最新版）

アクセシビリティへの配慮

アニメーション効果を実装する際は、以下の点に注意が必要です：

  1. prefers-reduced-motionへの対応
  2. キーボード操作時の:focus状態の視認性確保
  3. 十分なコントラスト比の確保
@media (prefers-reduced-motion: reduce) {
  .hvr-underline {
    transition: none;
  }
}

まとめ

CSS backgroundプロパティとlinear-gradientを組み合わせることで、複数行のテキストに対しても美しいunderlineアニメーションを実現できます。実装時は以下の点に注意しましょう：

  • 適切なHTML構造の設計
  • 単位の統一
  • Flexbox環境での挙動確認
  • アクセシビリティへの配慮

この実装方法は、従来のtext-decorationやborder-bottomでは実現できなかった柔軟なアニメーション効果を可能にします。

Discussion