( Blog )

『CSSで作る簡単なホバーアニメーション10選（コードあり）』を作ってみた！

Mar 27, 2026

コラム

87 views

こんにちは。エンジニアの鍋谷です。

今回のテーマは、「CSSで作る簡単なホバーアニメーション10選」です！
ぱちぱちぱち👏

CodePenで実際のコードをお見せしつつ、ポイントを解説していきます。
同じアニメーションを使用しているスピッカートの制作事例もご紹介しますので、イージングやデザインなどによる印象の違いも感じていただけたらなと思います。

1.下線をひく

左から右に下線がひかれるシンプルなアニメーションです。
下線は ::before などの疑似要素を scaleX を変化させることでも実現可能ですが、background-image を使うと、複数行にも対応できるところがポイントです◎

制作事例

2.マーカーをひく

1つ目の下線のアニメーションを少し発展させると、マーカーをひいたような表現ができます。
backgrouond-position でマーカーの位置、background-size でマーカーの太さを調整しています。

.marker {
  background-position: 100% 100%; // マーカーの位置
  background-size: 0% 45%; // マーカーの太さ
}

制作事例

3.テキストが上にスライドする

テキストが下から上にスライドするアニメーションです。
同じテキストを縦に2つ並べ、親要素に overflow: hidden で見える範囲を1文字分の高さに制限し、ホバー時に transform で全体を上にずらすことで、2つ目のテキストが現れる仕組みです。
テキストが見える縦幅（height や line-height 等）を調整することで印象が変わるのがポイントです。狭くすればするほど上品に、広げるほどポップな印象になります。

制作事例

4.文字がカタカタと傾く

rotate でカタカタと傾けているだけのシンプルなアニメーションですが、ホバーしている間は動き続けるというだけで、愛らしさが出てきますよね。今回紹介する中で、一番スピッカート感があるかもしれません。

制作事例

スピッカート福笑い2024

5.一文字ずつはねる

一文字ずつ span で区切り、scaleY でアニメーションすることによって、ぽよんと跳ねるようなアニメーションにしています。
はじめに少し scaleY の値を小さくしてジャンプ前のかがむ動きを入れるのがポイントです◎

制作事例

6.一文字ずつ拡大する

こちらも一文字ずつ span で区切り、scale で一文字ずつ拡大するアニメーションです。
各文字の transform-origin を変えることで、よりバクバクと心臓の鼓動のような動きにしています。

7.波のように色が変わる

こちらも文字を1文字ずつ span で分け、linear-gradient で作った縦3色の背景を文字の形で切り抜いて表示しています。
背景を上下に動かすことで文字色が変化し、さらに各文字に少しずつアニメーションの遅延をつけることで、左から右へ波打つようなアニメーションに見せています。

制作事例

トヨタバッテリーさま

8.テキストをスライスする

同じテキストを重ねて、それぞれ clip-path で上と下に分け、transform で横にずらすことでテキストをスライスしたような表現をしています。
今回はナナメに一直線でスライスしていますが、角度を変えたり、ガタガタにスライスしたりできるのでぜひ色々試してみてください。

// 上
.slice__text_upper {
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 80%);
}

// 下
.slice__text_bottom {
  clip-path: polygon(0% 80%, 100% 40%, 100% 100%, 0% 100%);
}

制作事例

NINE-Cさま

9.点線を回転させる

svg で点線を作成し、点線のパターン（間隔）と点線の移動量を揃えることで、なめらかに回転しているようなアニメーションを実現しています。

// SVGの点線パターン
stroke-dasharray="0 8"  // 8px間隔の点線

// アニメーション
@keyframes moveFrame {
  0%   { stroke-dashoffset: 0px; }
  100% { stroke-dashoffset: 8px; } // 点線1パターン分移動させる
}

制作事例

日昌電気制御さま　Chromateach（クロマティーチ）

10.ひっくり返す

同じテキストを2つ重ねて、片方をX軸（横軸）で180度ひっくり返しています。
重ねたテキストが見えないよう、背景色と同じ色をテキストの背景に指定して隠しています。

制作事例

DoKomiさま

まとめ

今回は、装飾のないテキストリンクをベースに、シンプルなホバーアニメーションを紹介しました。
使ったイージングは ease-out と steps 、linear だけです。

シンプルなCSSだけでこれだけたくさんの表現ができたら、、、夢がふくらみますね。
ここからイージングや動きの設計を工夫すれば、より心地よい表現やまた違った印象のアニメーションにすることができます。
さらに応用として、今回紹介した10種類のアニメーションをいくつか組み合わせることでも、表現の幅が広がると思います。ぜひいろいろ試してみてください！

ちなみに。
「テキストアニメーション」をテーマに、エンジニアリーダー金山が執筆したブログもありまして。よろしければぜひそちらもご覧ください◎
『CSSで作る簡単なテキストアニメーション10選（コードあり）』を作ってみた！