よく使うテキストリンクのホバーアニメーション13種【CSS】
よく使うテキストリンクのホバーアニメーション13種【CSS】

よく使うテキストリンクのホバーアニメーション13種【CSS】

  • CSS
よく使うテキストリンクのホバーアニメーション13種【CSS】

最終更新日：2025-02-18

公開日：2025-02-18

ページ内に広告が含まれています。

Webサイトのコーディングで、テキストリンクのホバーアニメーションは必ず実装するものです。下線だけで十分な場合もありますが、サイトのテイストに合わせたホバーアニメーションを実装するとより効果的です。今回は、よく使うテキストリンクのホバーアニメーションを13種類紹介していきます。

目次

  1. 共通のHTML・CSS
  2. 透過する
  3. 文字色の変更
  4. 文字色と背景色の変更
  5. 文字色の変更と背景色が左から右に流れる
  6. 下線が左から右へ流れる
  7. 下線が右から左へ流れる
  8. 下線が中央から広がる
  9. 文字間が広がる
  10. 拡大する
  11. 縦に回転する
  12. 横に回転する
  13. 上に移動する
  14. 文字をぼかす
  15. さいごに

共通のHTML・CSS

まずは、共通となるHTMLとCSSはこちらになります。

<a href="#" class="textlink">テキストリンク</a> a { color: #333; text-decoration: none; display: inline-block; }

HTMLはaタグのみとなり、CSSはデフォルトのスタイルの打消し等を行っています。フォントサイズや太さは用途に応じて変更してください。

透過する

まずは基本中の基本であるホバー時に透過する方法です。テキストよりも画像などのホバー時に使用する方が多いかもしれません。

.textlink { transition: opacity 0.5s; } .textlink:hover { opacity: 0.5; }

▼ テキストホバーでアニメーション

テキストリンク

文字色の変更

こちらもオーソドックスなホバーアニメーションです。ホバー時に文字色が変更になります。

.textlink { transition: color 0.5s; } .textlink:hover { color: #4D98BF; }

▼ テキストホバーでアニメーション

テキストリンク

文字色と背景色の変更

ホバー時に文字色に加え、背景色も変更となります。paddingプロパティで余白を設定しています。

.textlink { padding: 10px; transition: color 0.5s, background-color 0.5s; } .textlink:hover { color: #FFF; background-color: #4D98BF; }

▼ テキストホバーでアニメーション

テキストリンク

文字色の変更と背景色が左から右に流れる

ホバー時に文字色の変更に加えて、背景色が左から右に流れます。

.textlink { padding: 10px; background-image: linear-gradient(#4D98BF, #4D98BF); background-repeat: no-repeat; background-position: bottom right; background-size: 0 100%; transition: color 0.5s, background-size 0.5s; } .textlink:hover { color: #FFF; background-position: bottom left; background-size: 100% 100%; }

▼ テキストホバーでアニメーション

テキストリンク

下線が左から右へ流れる

ホバー時に下線が左から右に流れるよに表示されます。backgroundプロパティでグラデーションを使用しています。

.textlink { padding-bottom: 5px; background-image: linear-gradient(#333, #333); background-repeat: no-repeat; background-position: bottom right; background-size: 0 1px; transition: background-size 0.3s; } .textlink:hover { background-position: bottom left; background-size: 100% 1px; }

▼ テキストホバーでアニメーション

テキストリンク

下線が右から左へ流れる

ホバー時に下線が右から左に流れるよに表示されます。backgroundプロパティでグラデーションを使用しています。

.textlink { padding-bottom: 5px; background-image: linear-gradient(#333, #333); background-repeat: no-repeat; background-position: bottom left; background-size: 0 1px; transition: background-size 0.3s; } .textlink:hover { background-position: bottom right; background-size: 100% 1px; }

▼ テキストホバーでアニメーション

テキストリンク

下線が中央から広がる

ホバー時に下線が中央から広がるように表示されます。backgroundプロパティでグラデーションを使用しています。

.textlink { padding-bottom: 5px; background-image: linear-gradient(#333, #333); background-repeat: no-repeat; background-position: bottom right; background-size: 0 1px; transition: background-size 0.3s; } .textlink:hover { background-position: bottom left; background-size: 100% 1px; }

▼ テキストホバーでアニメーション

テキストリンク

文字間が広がる

ホバー時にletter-spacingプロパティを変更し、文字間が広がります。

.textlink { transition: letter-spacing 0.5s; } .textlink:hover { letter-spacing: 0.1em; }

▼ テキストホバーでアニメーション

テキストリンク

拡大する

ホバー時にtransformプロパティの値scaleで拡大しています。

.textlink { transition: transform 0.5s; } .textlink:hover { transform: scale(1.1); }

▼ テキストホバーでアニメーション

テキストリンク

縦に回転する

ホバー時にtransformプロパティの値rotateXで縦回転させています。

.textlink { transition: transform 0.5s; } .textlink:hover { transform: rotateX(360deg); }

▼ テキストホバーでアニメーション

テキストリンク

横に回転する

ホバー時にtransformプロパティの値rotateYで横回転させています。

.textlink { transition: transform 0.5s; } .textlink:hover { transform: rotateY(360deg); }

▼ テキストホバーでアニメーション

テキストリンク

上に移動する

ホバー時にtransformプロパティの値translateYで上に移動させています。

.textlink { transition: transform 0.5s; } .textlink:hover { transform: translateY(-5px); }

▼ テキストホバーでアニメーション

テキストリンク

文字をぼかす

ホバー時にfilterプロパティの値blurでぼかしています。

.textlink { transition: filter 0.5s; } .textlink:hover { filter: blur(5px); }

▼ テキストホバーでアニメーション

テキストリンク

さいごに

いかがでしたでしょうか。今回は、よく使うテキストリンクのホバーアニメーション13種を解説しました。ホバーアニメーションを使う事で、サイトの印象ががらっと変わります。サイトに合ったホバーアニメーションを実装するように心がけましょう。

要素の幅を中身によって変えられるwidth: fit-content;の使い方について【CSS】 margin-inline: auto;が意外と便利！ブロック要素の左右中央揃えに使えるプロパティ【CSS】 記事一覧

おすすめ記事

    • CSS
    calc関数で幅や高さを計算式で指定する方法【CSS】
    • HTML
    • CSS
    Adobeフォント(Webフォント)の使い方【HTML・CSS】
    • CSS
    ネガティブ(マイナス)マージンの使い方と注意点【CSS】
    • CSS
    display:inline-block;での横並びと隙間対策【CSS】

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

📎📎📎📎📎📎📎📎📎📎