CSSのみで実装可能！リンクテキストにマウスを重ねた時のアニメーション効果

初心者も必見！マウスを重ねた時のアニメーション効果はCSSのみで実装可能です。

グローバルメニューでテキストにマウスを重ねると、下線が左右に伸びるようなアニメーションを見たことあると思いますが、JavaScriptやjQueryプラグインを使わなくてもCSSのみで実現できるので、紹介したいと思います。

ラインが伸びるアニメーション
テキストの背景がスライドするアニメーション
- 背景色を左から右にスライド
  - サンプル
  - CSS
- 背景色を下から上にスライド
  - サンプル
  - CSS
まとめ

ラインが伸びるアニメーション

リンクテキストに width:0 の擬似要素を設定し、マウスを重ねると width が100%になるようにします。擬似要素の位置を変更することで、ラインが左から伸びたり、中央から伸びるアニメーションを作ることができます。アニメーションの時間は、transition プロパティで変更できます。

左からラインが伸びるアニメーション

ラインが左から右に伸びるアニメーション。ラインは border-bottom プロパティで指定しています。

サンプル

ラインが左から伸びます

CSS

a {
  position: relative;
  display: inline-block;
  transition: 0.5s;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  border-bottom: solid 1px #4fb6cf;
  transition: 0.5s;
}
a:hover::after {
  width: 100%;
}

a {

position: relative;

display: inline-block;

transition: 0.5s;

}

a::after {

position: absolute;

bottom: 0;

left: 0;

content: '';

width: 0;

border-bottom: solid 1px #4fb6cf;

transition: 0.5s;

}

a:hover::after {

width: 100%;

}

左から上下にラインが伸びるアニメーション

テキストの上下にラインが伸びるアニメーション。before と after の両方を指定し、position プロパティの値以外は同じ設定を適用しています。

サンプル

ラインが左から伸びます（上下）

CSS

a {
  position: relative;
  display: inline-block;
  transition: 0.5s;
}
a::before, a::after {
  position: absolute;
  left: 0;
  content: '';
  width: 0;
  border-bottom: solid 1px #4fb6cf;
  transition: 0.5s;
}
a::before{
  top: 0;
}
a::after{
  bottom: 0;
}
a:hover::before, a:hover::after {
  width: 100%;
}

a {

position: relative;

display: inline-block;

transition: 0.5s;

}

a::before, a::after {

position: absolute;

left: 0;

content: '';

width: 0;

border-bottom: solid 1px #4fb6cf;

transition: 0.5s;

}

a::before{

top: 0;

}

a::after{

bottom: 0;

}

a:hover::before, a:hover::after {

width: 100%;

}

中央からラインが伸びるアニメーション

マウスをリンクテキストに重ねると、テキスト下のラインが中央から左右に伸びるアニメーション。グローバルメニューなどでよく見かけます。position プロパティで擬似要素をテキストの中央に配置するのがポイントです。

サンプル

ラインが中央から伸びます

CSS

a {
  position: relative;
  display: inline-block;
  transition: 0.5s;
}
a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  border-bottom: solid 1px #4fb6cf;
  transition: 0.5s;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a:hover::after {
  width: 100%;
}

a {

position: relative;

display: inline-block;

transition: 0.5s;

}

a::after {

position: absolute;

bottom: 0;

left: 50%;

content: '';

width: 0;

border-bottom: solid 1px #4fb6cf;

transition: 0.5s;

-moz-transform: translateX(-50%);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

a:hover::after {

width: 100%;

}

テキストの背景がスライドするアニメーション

背景色が左右または、上下からスライドするようなアニメーションです。linear-gradient で背景色を、background-position でアニメーションの方向を指定しています。

背景色を左から右にスライド

テキストの背景色が左から右へスライドするアニメーション。マウスオーバーした時のテキストカラーも変更しています。

サンプル

背景色が左からスライドします

CSS

a {
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(79,182,207,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.5s;
}
a:hover {
  background-position: -100% 0;
  color: #fff;
}

a {

background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(79,182,207,1) 50%);

background-position: 0 0;

background-size: 200% auto;

transition: 0.5s;

}

a:hover {

background-position: -100% 0;

color: #fff;

}

背景色を下から上にスライド

背景色を下から上にスライドするアニメーション。linear-gradient の方向と、background-position の値を変更しています。

サンプル

背景色が下からスライドします

CSS

a {
  background-image: linear-gradient( rgba(0,0,0,0) 50%, rgba(79,182,207,1) 50%);
  background-position: 0 0;
  background-size: auto 200%;
  transition: 0.5s;
}
a:hover {
  background-position: 0 100%;
  color: #fff;
}

a {

background-image: linear-gradient( rgba(0,0,0,0) 50%, rgba(79,182,207,1) 50%);

background-position: 0 0;

background-size: auto 200%;

transition: 0.5s;

}

a:hover {

background-position: 0 100%;

color: #fff;

}

まとめ

今回紹介したアニメーションは、色々なWEBサイトでよく目にする基本的なアニメーションです。CSSの設定次第では、さらに複雑な動きも実現可能です。あまり度が過ぎると文字が読みにくくなりますが、適度なアニメーションはデザインのアクセントになるので、リンクテキストのマウスオーバーアニメーションとして使ってみてください。

CSSのみで実装可能！リンクテキストにマウスを重ねた時のアニメーション効果でした。