【PR】を含みます。

フロントエンド

【CSS】複数行対応！ホバー時のテキストスライドアニメーションの実装方法

CSS 複数行対応！ホバー時のテキストスライドアニメーションの実装方法

本記事では、複数行対応のホバー時のテキストスライドアニメーションの実装方法を紹介します。

上下左右のスライドに対応しています。

ホバー時に下から上にスライドするアニメーション

サンプル

Hover Me!
Hover Me! Hover Me!
Hover Me!

実装コード

HTML
Copy
  1. <div class="hover-text">
  2.   <span>Hover Me!<br>Hover Me!</span>
  3.   <span>Hover Me!<br>Hover Me!</span>
  4. </div>
CSS
Copy
  1. .hover-text {
  2.   display: inline-flex;
  3.   flex-direction: column;
  4.   position: relative;
  5.   overflow: hidden; /* 範囲外を隠す */
  6.   line-height: 1.5;
  7.   cursor: pointer;
  8. }
  10. .hover-text span {
  11.   display: inline-block;
  12.   transform: translateY(0); /* 初期状態: 表示位置 */
  13.   transition: transform 0.3s ease; /* アニメーションを滑らかに */
  14. }
  16. .hover-text span:nth-child(2) {
  17.   width: 100%;
  18.   height: 100%;
  19.   position: absolute;
  20.   top: 100%;
  21. }
  23. .hover-text:hover span {
  24.   transform: translateY(-100%); /* ホバー時にスライド */
  25. }

ホバー時に上から下にスライドするアニメーション

サンプル

Hover Me!
Hover Me! Hover Me!
Hover Me!

実装コード

HTML
Copy
  1. <div class="hover-text">
  2.   <span>Hover Me!<br>Hover Me!</span>
  3.   <span>Hover Me!<br>Hover Me!</span>
  4. </div>
CSS
Copy
  1. .hover-text {
  2.   display: inline-flex;
  3.   flex-direction: column;
  4.   position: relative;
  5.   overflow: hidden; /* 範囲外を隠す */
  6.   line-height: 1.5;
  7.   cursor: pointer;
  8. }
  10. .hover-text span {
  11.   display: inline-block;
  12.   transform: translateY(0); /* 初期状態: 表示位置 */
  13.   transition: transform 0.3s ease; /* アニメーションを滑らかに */
  14. }
  16. .hover-text span:nth-child(2) {
  17.   width: 100%;
  18.   height: 100%;
  19.   position: absolute;
  20.   top: -100%;
  21. }
  23. .hover-text:hover span {
  24.   transform: translateY(100%); /* ホバー時にスライド */
  25. }

ホバー時に左から右にスライドするアニメーション

サンプル

Hover Me!
Hover Me! Hover Me!
Hover Me!

実装コード

HTML
Copy
  1. <div class="hover-text">
  2.   <span>Hover Me!<br>Hover Me!</span>
  3.   <span>Hover Me!<br>Hover Me!</span>
  4. </div>
CSS
Copy
  1. .hover-text {
  2.   display: inline-block;
  3.   position: relative;
  4.   overflow: hidden; /* 範囲外を隠す */
  5.   line-height: 1.5;
  6.   cursor: pointer;
  7. }
  9. .hover-text span {
  10.   display: inline-block;
  11.   transform: translateX(0); /* 初期状態: 表示位置 */
  12.   transition: transform 0.3s ease; /* アニメーションを滑らかに */
  13. }
  15. .hover-text span:nth-child(2) {
  16.   width: 100%;
  17.   height: 100%;
  18.   position: absolute;
  19.   left: -100%;
  20. }
  22. .hover-text:hover span {
  23.   transform: translateX(100%); /* ホバー時にスライド */
  24. }

ホバー時に右から左にスライドするアニメーション

サンプル

Hover Me!
Hover Me! Hover Me!
Hover Me!

実装コード

HTML
Copy
  1. <div class="hover-text">
  2.   <span>Hover Me!<br>Hover Me!</span>
  3.   <span>Hover Me!<br>Hover Me!</span>
  4. </div>
CSS
Copy
  1. .hover-text {
  2.   display: inline-block;
  3.   position: relative;
  4.   overflow: hidden; /* 範囲外を隠す */
  5.   line-height: 1.5;
  6.   cursor: pointer;
  7. }
  9. .hover-text span {
  10.   display: inline-block;
  11.   transform: translateX(0); /* 初期状態: 表示位置 */
  12.   transition: transform 0.3s ease; /* アニメーションを滑らかに */
  13. }
  15. .hover-text span:nth-child(2) {
  16.   width: 100%;
  17.   height: 100%;
  18.   position: absolute;
  19.   left: 100%;
  20. }
  22. .hover-text:hover span {
  23.   transform: translateX(-100%); /* ホバー時にスライド */
  24. }

注意事項

今回紹介したコードは、ホバー前とホバー後のテキストが同じであることを前提に作成しています。

ホバー前のテキストより、ホバー後のテキストが多くなる場合上手く動作しないため、別途対応が必要です。

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-フロントエンド
-