コーディングで、テキストにカーソルを乗せたときにアニメーションをさせるのはよくある実装です。
単純なもので言えば、色を薄くする、色を変えるなどです。
今回は、このテキストのホバーアニメーションをまとめて20種類ご紹介します。
テキストのアンダーライン(下線)アニメーションについては、以下の記事でまとめています。
-
CSSのみ！テキストホバー時のアンダーライン(下線)アニメーションまとめ【複数行あり】
続きを見る
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は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種類のサンプル付き】
続きを見る
以上になります。
アニメーションは別の記事){kind=link}