Webサイトのテキストリンク部分はマウスホバーした時、何かしらアニメーションを付けることが多いですね。
アニメーションを設定することでユーザーが「この部分はクリック出来る」と認識することが出来ます。
しかし、毎回同じアニメーションばかりになりがちで、たまには他のアニメーションを取り入れてみたいと思いませんか？

この記事ではCSSのみで実装することが出来るテキストリンクのマウスホバーした時のアニメーションを10個ご紹介したいと思います。

前提条件

この記事でご紹介するコードは最後のサンプル以外は以下のHTMLをベースとしています。

<p class="text"><a href="#">【アニメーション】テキストのホバーした時のCSSサンプルコード10選</a></p>

テキストを半透明にする

ホバーした時にテキストを半透明にする場合はこちら。

.text a{
    color: #dc5a45;
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.text a:hover{
    opacity: .6;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストの色を変える

ホバーした時にテキストの色を変える場合はこちら。

.text a{
    color: #dc5a45;
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.text a:hover{
    color: #e8c72e;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下線を引く

ホバーした時に下線を引く場合はこちら。

.text a{
    color: #dc5a45;
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.text a:hover{
    text-decoration: underline;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下線を中央から引く

ホバーした時に下線を中央から引く場合はこちら。

.text a{
    color: #dc5a45;
    text-decoration: none;
    position: relative;
}
.text a::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #dc5a45;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0,1);
    transition: all .3s ease-in-out;
}
.text a:hover::after{
    transform: scale(1,1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左から右に流れる下線を引く

ホバーした時に左から右に流れる下線を引く場合はこちら。

.text a{
    color: #dc5a45;
    text-decoration: none;
    position: relative;
}
.text a::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #dc5a45;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0,1);
    transform-origin: right top;
    transition: transform .3s ease-in-out;
}
.text a:hover::after{
    transform: scale(1,1);
    transform-origin: left top;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

背景色を表示する

ホバーした時に背景色を表示する場合はこちら。

.text a{
    color: #dc5a45;
    transition: all .3s ease-in-out;
    text-decoration: none;
}
.text a:hover{
    color: #fff;
    background: #dc5a45;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

中央から背景色を表示する

ホバーした時に中央から背景色を表示する場合はこちら。

.text a{
    color: #dc5a45;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;
}
.text a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: scale(0,1);
    transition: all .3s ease-in-out;
}
.text a:hover{
    color: #fff;
}
.text a:hover::before{
    transform: scale(1,1);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左から右に流れる背景色を表示する

ホバーした時に左から右に流れる背景色を表示する場合はこちら。

.text a{
    color: #dc5a45;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;
}
.text a::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: scale(0,1);
    transform-origin: right top;
    transition: transform .3s ease-in-out;
}
.text a:hover{
    color: #fff;
}
.text a:hover::after{
    transform: scale(1,1);
    transform-origin: left top;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストを縁取りをする

ホバーした時にテキストを縁取りをする場合はこちら。

.text a{
    color: #dc5a45;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.text a::after{
    content: "";
    display: block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: 1px solid #dc5a45;
    position: absolute;
    left: -5px;
    bottom: -5px;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.text a:hover::after{
    opacity: 1;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下からテキストが表示する

ホバーした時に下からテキストが表示する場合のHTMLはこちら。

<p class="text"><a href="#" data-text="【アニメーション】テキストのホバーした時のCSSサンプルコード10選">【アニメーション】テキストのホバーした時のCSSサンプルコード10選</a></p>

そして、CSSはこちら。

.text{
    overflow: hidden;
}
.text a{
    color: #dc5a45;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: transform .3s ease-in-out;
}
.text a::after{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    white-space: nowrap;
}
.text a:hover{
    transform: translateY(-100%);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
CSSの指定をちょっと変えるだけでアニメーションの印象が大きく変わりますね。
また、秒数を変えるだけでもまた違った印象になります。
デザインによって向き不向きのアニメーションはありますが、今回ご紹介したアニメーションは比較的どんなデザインでも違和感なく使うことが出来るものばかりです。
是非、作成中のWebサイトのアニメーションの参考にしてみて下さい。