[超簡単]CSSだけでOK！テキストリンクにアニメーションを追加する方法

今回は私がサイトを作成する時によく使用するリンクのアニメーション2つを紹介したいと思います。
非常に簡単なコードでアニメーションできるので初心者の方でも簡単に設置できますし、カスタムすることも可能です！

マウスオーバーで矢印が動くCSS
1. HTML
2. CSS
  1. 距離
  2. スピード
アンダーラインが動くタイプ
まとめ
1. 参考

マウスオーバーで矢印が動くCSS

See the Pen Link_ by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML

<a href="#" class="next-link">
  次へ <span class="arrow">→</span>
</a>

「span class=”arrow”」内のコードを右に動かします。
サンプルでは「→」になってますが他のテキストに置き換えたり、画像にすることも可能です。

CSS

.next-link {
    position: relative;
     font-size: 16px;
    text-decoration: none;
    color: #000;
    display: inline-block;
}

.arrow {
    display: inline-block;
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

.next-link:hover .arrow {
    animation: moveRight 1s ease-in-out infinite;
}

「@keyframes」でアニメーションの制御を行います。「translateX(5px)」で移動距離を設定。
「.next-link:hover .arrow」の「animation」でタイミング（時間）を制御。

アニメーションの距離や動くタイミングを変えたい場合は上記箇所を好みに修正してください。

距離

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);/* translateX(5px)を好みの数字に修正 (例:10px) */
    }
    100% {
        transform: translateX(0);
    }
}

スピード

.next-link:hover .arrow {
    animation: moveRight 1s ease-in-out infinite; /* 1s を好みの数字に修正 (例:10s) */
}

非常に簡単なコードで、矢印がアニメーションするリンクを作成することができました！
次に紹介するのは矢印ではなく、マウスオーバーした際にアンダーラインがアニメーションで表示されるタイプになります。

アンダーラインが動くタイプ

See the Pen Link_arrow_ul by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML

<a href="#" class="link">リンクテキスト　<span>→</span></a>

「<a href=”#” class=”link”>リンクテキスト　<span>→</span></a>」でリンクテキストと矢印を含むリンク要素。

CSS

.link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px; /* アンダーラインの位置 */
    width: 0;
    height: 2px; /* アンダーラインの高さ */
    background-color: #000; /* アンダーラインの色 */
    transition: width 0.4s; /* アニメーションの設定 */
}

アンダーラインの位置やデザインのコード

.link:hover::after {
    width: 100%;
    opacity: 0;
    animation: underline 2s linear infinite; /* 左から右へのアンダーラインのアニメーション */
}

@keyframes underline {
    0% {
        width: 0;        
    }
    20% {
       opacity: 1;
    }
    95% {
        width: 100%;
        opacity: 1;   
    }
    100% {
    opacity: 0; /* アンダーラインをフェードアウト */
  }
}

マウスオーバーした際のアンダーラインのアニメーション制御のコード。
タイミングを変えたい場合は「@keyframes」のコードを好みに調整してください。
アニメーションの時間を変更したい場合は「.link:hover::after」の「animation」内の「2s」を好みの数字に調整してください。

その他

<div class="container">
  <a href="#" class="next-link">次へ <span class="arrow">→</span></a>
</div>

/*コンテンツを中央に*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.container a {
  font-size: 24px; /* 文字サイズ */
}

こちらの「<div class=”container”>」関連で画面中央に配置されるようにしていますので、コピペする場合はこちらのコードはなくてOKです。