CSS Web制作

【保存版】CSSのテキストホバーアニメーションまとめ【コピペOK】

※ 当サイトではアフィリエイト広告を利用しています

テキストにカーソルを乗せたときにアニメーションさせた例をたくさん見たいから教えて

コーディングで、テキストにカーソルを乗せたときにアニメーションをさせるのはよくある実装です。

単純なもので言えば、色を薄くする、色を変えるなどです。

今回は、このテキストのホバーアニメーションをまとめて20種類ご紹介します。

テキストのアンダーライン(下線)アニメーションについては、以下の記事でまとめています。

あわせて読みたい
CSSのみテキストホバー時のアンダーライン(下線)アニメーションまとめ【複数行あり】
CSSのみ！テキストホバー時のアンダーライン(下線)アニメーションまとめ【複数行あり】

続きを見る

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

テキストのホバーアニメーションの作り方

それでは、テキストのホバーアニメーションの作り方を解説していきます。

HTMLは共通でこちらになります。

<a href="#">じゅんぺいブログ</a>

CSSはアニメーションに関わるコードだけ書くので、全部見たい人はデモの左上にあるHTML・CSSをクリックして下さい。

ポイント①

じんわり変化させるtransitionは、transition: all .5s;という書き方でも問題ありませんが、allにすると実務では予期せぬ箇所でアニメーションをする可能性もあります。面倒と思うかも知れませんがtransition: opacity .5s;やtransition: background-color .5s, color .5s;という書き方をしています（この書き方に慣れておくのがおすすめです）

ポイント②

transformを使う場合はインライン要素のaタグでは使えないので、display: inline-block;を書いています。

ポイント③

z-index: -1;となっている場合は、重なり順に注意して下さい。

 

透過

a {
  transition: opacity .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  opacity: .5; /* 透過 */
}

See the Pen
テキスト（hoverで色変更） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更

a {
  color: #333; /* 文字色 */
  transition: color .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  color: #1cb4d3; /* 文字色 */
}

See the Pen
テキスト（hoverで色変更） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色と背景色変更

a {
  color: #1cb4d3; /* 文字色 */
  transition: background-color .5s, color .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  background-color: #1cb4d3; /* 背景色 */
  color: #fff; /* 文字色 */
}

See the Pen
テキスト（hoverで色変更） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が左からスライドで変更（左に戻る）

a {
  background-image: linear-gradient(to right, transparent 50%, #1cb4d3 50%); /* 背景色 */
  background-position: 0 0; /* 背景色の位置 */
  background-size: 200% auto; /* 背景色のサイズ */
  color: #1cb4d3; /* 文字色 */
  transition: background .5s, color .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  background-position: -100% 0; /* 背景色の位置 */
  color: #fff; /* 文字色 */
}

See the Pen
テキスト（hoverで文字色変更と背景色が左からスライドで変更（左に戻る）） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が左からスライドで変更（右に消えていく）

a {
  color: #1cb4d3;
  display: inline-block;
  position: relative; /* 相対位置指定 */
  transition: color .5s; /* アニメーション速度 */
}
a::before {
  background-color: #1cb4d3; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 100%; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: right top; /* 変形の原点を右上に指定 */
  transition: transform .5s; /* アニメーション速度 */
  width: 100%; /* 要素の幅 */
  z-index: -1; /* 背景色は文字の下 */
}
/* hover後のスタイル */
a:hover {
  color: #fff; /* 文字色 */
}
a:hover::before {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
}

See the Pen
テキスト（hoverで文字色変更と背景色が左からスライドで変更（消えていく）） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が下からスライドで変更（下に戻る）

a {
  background-image: linear-gradient(to top, #1cb4d3 50%, transparent 50%); /* 背景色 */
  background-position: 0 0; /* 背景色の位置 */
  background-size: auto 200%; /* 背景色のサイズ */
  color: #1cb4d3; /* 文字色 */
  transition: background .5s, color .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  background-position: 0 100%; /* 背景色の位置 */
  color: #fff; /* 文字色 */
}

See the Pen
テキスト（hoverで色変更） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が下からスライドで変更（上に消えていく）

a {
  color: #1cb4d3;
  display: inline-block;
  position: relative; /* 相対位置指定 */
  transition: color .5s; /* アニメーション速度 */
}
a::before {
  background-color: #1cb4d3; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 100%; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scaleY(0); /* 下線の非表示 */
  transform-origin: top; /* 変形の原点を上部に指定 */
  transition: transform .5s; /* アニメーション速度 */
  width: 100%; /* 要素の幅 */
  z-index: -1; /* 背景色は文字の下 */
}
/* hover後のスタイル */
a:hover {
  color: #fff; /* 文字色 */
}
a:hover::before {
  transform: scaleY(1); /* 下線の表示 */
  transform-origin: bottom; /* 変形の原点を下部に指定 */
}

See the Pen
テキスト（hoverで文字色変更と背景色が左からスライドで変更（右に消えていく）） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が上からスライドで変更（上に戻る）

a {
  background-image: linear-gradient(to bottom, #1cb4d3 50%, transparent 50%); /* 背景色 */
  background-position: 0 100%; /* 背景色の位置 */
  background-size: auto 200%; /* 背景色のサイズ */
  color: #1cb4d3; /* 文字色 */
  transition: background .5s, color .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  background-position: 0 0; /* 背景色の位置 */
  color: #fff; /* 文字色 */
}

See the Pen
テキスト（hoverで文字色変更と背景色が上からスライドで変更） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が上からスライドで変更（下に消えていく）

a {
  color: #1cb4d3;
  display: inline-block;
  position: relative; /* 相対位置指定 */
  transition: color .5s; /* アニメーション速度 */
}
a::before {
  background-color: #1cb4d3; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 100%; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scaleY(0); /* 下線の非表示 */
  transform-origin: bottom; /* 変形の原点を下部に指定 */
  transition: transform .5s; /* アニメーション速度 */
  width: 100%; /* 要素の幅 */
  z-index: -1; /* 背景色は文字の下 */
}
/* hover後のスタイル */
a:hover {
  color: #fff; /* 文字色 */
}
a:hover::before {
  transform: scaleY(1); /* 下線の表示 */
  transform-origin: top; /* 変形の原点を上部に指定 */
}

See the Pen
テキスト（hoverで文字色変更と背景色が下からスライドで変更（上に消えていく）） by junpei (@junpei-sugiyama)
on CodePen.

 

文字色変更と背景色が中央から左右にスライドで変更

a {
  color: #1cb4d3;
  display: inline-block;
  position: relative; /* 相対位置指定 */
  transition: color .5s; /* アニメーション速度 */
}
a::before {
  background-color: #1cb4d3; /* 下線の色 */
  content: ""; /* 要素に内容を追加 */
  height: 100%; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scaleX(0); /* X軸方向のサイズ0(非表示) */
  transition: transform .5s; /* アニメーション速度 */
  width: 100%; /* 要素の幅 */
  z-index: -1; /* 背景色は文字の下 */
}
/* hover後のスタイル */
a:hover {
  color: #fff; /* 文字色 */
}
a:hover::before {
  transform: scaleX(1); /* X軸方向のサイズを100%(表示) */
}

See the Pen
テキスト（hoverで文字色変更と背景色が中央からスライドで変更（）） by junpei (@junpei-sugiyama)
on CodePen.

 

拡大

a {
  display: inline-block;
  transition: transform .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  transform: scale(1.1); /* 拡大 */
}

See the Pen
テキスト（hoverで透過） by junpei (@junpei-sugiyama)
on CodePen.

 

一瞬拡大

a {
  display: inline-block;
}
/* hover後のスタイル */
a:hover {
  animation: zoom .3s; /* アニメーション */
}
@keyframes zoom {
  50% {
    transform: scale(1.05); /* 拡大 */
  }
}

ここでは、@keyframesを使っているので、アニメーションはtransitionではなくanimationを使っています。

See the Pen
テキスト（hoverで拡大） by junpei (@junpei-sugiyama)
on CodePen.

 

縦に一回転

a {
  display: inline-block;
  transition: transform .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  transform: rotateX(360deg); /* 縦に一回転 */
}

See the Pen
テキスト（hoverで透過） by junpei (@junpei-sugiyama)
on CodePen.

 

横に一回転

a {
  display: inline-block;
  transition: transform .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  transform: rotateY(360deg); /* 横に一回転 */
}

See the Pen
テキスト（hoverで縦に一回転） by junpei (@junpei-sugiyama)
on CodePen.

 

傾ける

a {
  display: inline-block;
  transition: transform .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  transform: rotate(5deg); /* 傾ける */
}

See the Pen
テキスト（hoverで透過） by junpei (@junpei-sugiyama)
on CodePen.

 

上に移動する

a {
  position: relative;
  top: 0; /* 上の位置 */
  transition: top .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  top: -5px; /* 上の位置 */
}

See the Pen
テキスト（hoverで透過） by junpei (@junpei-sugiyama)
on CodePen.

 

幅を広げる

a {
  transition: letter-spacing .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  letter-spacing: 0.1em; /* 文字間 */
}

See the Pen
テキスト（hoverで傾ける） by junpei (@junpei-sugiyama)
on CodePen.

 

最初ぼかしてくっきりさせる

a {
  filter: blur(10px); /* ぼかし効果 */
  transition: filter .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  filter: blur(0); /* ぼかし効果 */
}

See the Pen
テキスト（hoverで透過） by junpei (@junpei-sugiyama)
on CodePen.

 

影を付ける（角度なし）

a {
  transition: filter .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  filter: drop-shadow(0 0 5px #1cb4d3);
}

See the Pen
テキスト（hoverで影を付ける（角度なし）） by junpei (@junpei-sugiyama)
on CodePen.

 

影を付ける（角度あり）

a {
  transition: filter .5s; /* アニメーション速度 */
}
/* hover後のスタイル */
a:hover {
  filter: drop-shadow(8px 8px 3px #1cb4d3);
}

See the Pen
テキスト（hoverで影を付ける（角度なし）） by junpei (@junpei-sugiyama)
on CodePen.

 

 

まとめ

今回は、CSSだけで実装できるテキストのホバーアニメーションについて解説しました。

また、GSAPを使うとさらにいろんなことができるので、興味のある人は以下の記事を参照下さい。

【GSAP】テキストアニメーションで一文字ずつフェードインさせる方法【14種類のサンプル付き】
【GSAP】テキストアニメーションで一文字ずつフェードインさせる方法【14種類のサンプル付き】

続きを見る

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X（旧Twitter）フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作