CSS Web制作

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

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

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

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

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

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

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

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

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

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

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種類のサンプル付き】

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作