2022年3月25日

工藤

【コピペ可】CSSのhoverアニメーション-テキスト編-

マークアップ

facebook
twitter

CSSのアニメーションを作成してまとめてみました。
今回は単純なテキストに対してのアニメーションになります。
ちなみにaタグのカラーやtext-decorationについてはあらかじめ調整しておいてください。

アニメーションの一覧は下のDEMOに置いておきます。

DEMO

1 下線系
2 背景色系

下線系

左から下線が現れてカーソルを外すと左側に消える

サンプルテキスト

HTML

<p class="line01"><a href="#">サンプルテキスト</a></p>

1	<p class="line01"><a href="#">サンプルテキスト</a></p>

CSS

.line01 a{
  position: relative;
  padding-bottom: 5px;
}
.line01 a::after {
  content: '';
  background: #BC0034;
  width: 0%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all .3s ease;
}
.line01 a:hover::after{
  width: 100%;
}

.line01 a{

position: relative;

padding-bottom: 5px;

}

.line01 a::after {

content: '';

background: #BC0034;

width: 0%;

height: 1px;

position: absolute;

left: 0;

bottom: 0;

transition: all .3s ease;

}

.line01 a:hover::after{

width: 100%;

}

::afterで作成した下線をhoverしたときにwidth: 100%;にする、という割と単純なアニメーションです。

左から下線が現れてカーソルを外すと右側に消える

サンプルテキスト

HTML

<p class="line02"><a href="#">サンプルテキスト</a></p>

1	<p class="line02"><a href="#">サンプルテキスト</a></p>

CSS

.line02 a{
  position: relative;
  padding-bottom: 5px;
}
.line02 a::after {
  content: '';
  background: #BC0034;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transition: transform .3s;
  transform-origin: right top;
  transform: scale(0, 1);
}
.line02 a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

.line02 a{

position: relative;

padding-bottom: 5px;

}

.line02 a::after {

content: '';

background: #BC0034;

width: 100%;

height: 1px;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transition: transform .3s;

transform-origin: right top;

transform: scale(0, 1);

}

.line02 a:hover::after {

transform-origin: left top;

transform: scale(1, 1);

}

::afterで作成した下線を、はじめはscaleの値を0にしておいてhoverしたら1にする、という感じです。
transform-originでアニメーションの開始位置を調整しています。

右から下線が現れてカーソルを外すと左側に消える

サンプルテキスト

HTML

<p class="line03"><a href="#">サンプルテキスト</a></p>

1	<p class="line03"><a href="#">サンプルテキスト</a></p>

CSS

.line03 a{
  position: relative;
  padding-bottom: 5px;
}
.line03 a::after {
  content: '';
  background: #BC0034;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transition: transform .3s;
  transform-origin: left top;
  transform: scale(0, 1);
}
.line03 a:hover::after {
  transform-origin: right top;
  transform: scale(1, 1);
}

.line03 a{

position: relative;

padding-bottom: 5px;

}

.line03 a::after {

content: '';

background: #BC0034;

width: 100%;

height: 1px;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transition: transform .3s;

transform-origin: left top;

transform: scale(0, 1);

}

.line03 a:hover::after {

transform-origin: right top;

transform: scale(1, 1);

}

上のアニメーションの逆バージョンです。

中央から下線が現れてカーソルを外すと中央に消える

サンプルテキスト

HTML

<p class="line04"><a href="#">サンプルテキスト</a></p>

1	<p class="line04"><a href="#">サンプルテキスト</a></p>

CSS

.line04 a{
  position: relative;
  padding-bottom: 5px;
}
.line04 a::after {
  content: '';
  background: #BC0034;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transition: transform .3s;
  transform-origin: center top;
  transform: scale(0, 1);
}
.line04 a:hover::after {
  transform-origin: center top;
  transform: scale(1, 1);
}

.line04 a{

position: relative;

padding-bottom: 5px;

}

.line04 a::after {

content: '';

background: #BC0034;

width: 100%;

height: 1px;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transition: transform .3s;

transform-origin: center top;

transform: scale(0, 1);

}

.line04 a:hover::after {

transform-origin: center top;

transform: scale(1, 1);

}

上のアニメーションの流れで、今度は中央から表示するバージョンです。

両端から下線が現れてカーソルを外すと両端に消える

サンプルテキスト

HTML

<p class="line05"><a href="#">サンプルテキスト</a></p>

1	<p class="line05"><a href="#">サンプルテキスト</a></p>

CSS

.line05 a{
  position: relative;
  padding-bottom: 5px;
}
.line05 a::before {
  content: '';
  background: #BC0034;
  width: 50%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transition: transform .3s;
  transform-origin: left top;
  transform: scale(0, 1);
}
.line05 a:hover::before {
  transform: scale(1, 1);
}
.line05 a::after {
  content: '';
  background: #BC0034;
  width: 50%;
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: transform .3s;
  transform-origin: right top;
  transform: scale(0, 1);
}
.line05 a:hover::after {
  transform: scale(1, 1);
}

.line05 a{

position: relative;

padding-bottom: 5px;

}

.line05 a::before {

content: '';

background: #BC0034;

width: 50%;

height: 1px;

position: absolute;

left: 0;

bottom: 0;

margin: auto;

transition: transform .3s;

transform-origin: left top;

transform: scale(0, 1);

}

.line05 a:hover::before {

transform: scale(1, 1);

}

.line05 a::after {

content: '';

background: #BC0034;

width: 50%;

height: 1px;

position: absolute;

right: 0;

bottom: 0;

margin: auto;

transition: transform .3s;

transform-origin: right top;

transform: scale(0, 1);

}

.line05 a:hover::after {

transform: scale(1, 1);

}

beforeとafterを使って両端から線が現れるようになっています。
それぞれの背景色を変えても面白いかもしれないです。

下線が上からふわっと表れてカーソルを外すと上に消える

サンプルテキスト

HTML

<p class="line06"><a href="#">サンプルテキスト</a></p>

1	<p class="line06"><a href="#">サンプルテキスト</a></p>

CSS

.line06 a{
  position: relative;
  padding-bottom: 5px;
}
.line06 a::after {
  content: '';
  background: #BC0034;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 5px;
  opacity: 0;
  transition: all .3s ease;
}
.line06 a:hover::after {
  bottom: 0px;
  opacity: 1;
}

.line06 a{

position: relative;

padding-bottom: 5px;

}

.line06 a::after {

content: '';

background: #BC0034;

width: 100%;

height: 1px;

position: absolute;

left: 0;

bottom: 5px;

opacity: 0;

transition: all .3s ease;

}

.line06 a:hover::after {

bottom: 0px;

opacity: 1;

}

bottomの位置を上にしておいてhoverしたら0に戻すという感じです。

下線が下からふわっと表れてカーソルを外すと下に消える

サンプルテキスト

HTML

<p class="line07"><a href="#">サンプルテキスト</a></p>

1	<p class="line07"><a href="#">サンプルテキスト</a></p>

CSS

.line07 a{
  position: relative;
  padding-bottom: 5px;
}
.line07 a::after {
  content: '';
  background: #BC0034;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -5px;
  opacity: 0;
  transition: all .3s ease;
}
.line07 a:hover::after {
  bottom: 0px;
  opacity: 1;
}

.line07 a{

position: relative;

padding-bottom: 5px;

}

.line07 a::after {

content: '';

background: #BC0034;

width: 100%;

height: 1px;

position: absolute;

left: 0;

bottom: -5px;

opacity: 0;

transition: all .3s ease;

}

.line07 a:hover::after {

bottom: 0px;

opacity: 1;

}

さっきとは逆でbottomの位置を下にしておいてhoverしたら0に戻すという感じです。

背景色系

サンプルテキスト

HTML

<p class="bg01"><a href="#">サンプルテキスト</a></p>

1	<p class="bg01"><a href="#">サンプルテキスト</a></p>

CSS

.bg01 a{
  position: relative;
  padding: 0 8px;
  z-index: 1;
  transition: all .3s ease;
}
.bg01 a::after{
  content: '';
  background: #BC0034;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: -1;
}
.bg01 a:hover {
  color: #FFFFFF !important;
}
.bg01 a:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);  
}

.bg01 a{

position: relative;

padding: 0 8px;

z-index: 1;

transition: all .3s ease;

}

.bg01 a::after{

content: '';

background: #BC0034;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transform: scale(0, 1);

transform-origin: right top;

transition: transform .3s;

z-index: -1;

}

.bg01 a:hover {

color: #FFFFFF !important;

}

.bg01 a:hover::after{

transform-origin: left top;

transform: scale(1, 1);

}

下線の応用で背景として置いてみた感じです。z-indexの値で調整してください。

背景色が右から出てきて左に消える

サンプルテキスト

HTML

<p class="bg02"><a href="#">サンプルテキスト</a></p>

1	<p class="bg02"><a href="#">サンプルテキスト</a></p>

CSS

.bg02 a{
  position: relative;
  padding: 0 8px;
  z-index: 1;
  transition: all .3s ease;
}
.bg02 a::after{
  content: '';
  background: #BC0034;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  z-index: -1;
}
.bg02 a:hover {
  color: #FFFFFF !important;
}
.bg02 a:hover::after{
  transform-origin: right top;
  transform: scale(1, 1);  
}

.bg02 a{

position: relative;

padding: 0 8px;

z-index: 1;

transition: all .3s ease;

}

.bg02 a::after{

content: '';

background: #BC0034;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transform: scale(0, 1);

transform-origin: left top;

transition: transform .3s;

z-index: -1;

}

.bg02 a:hover {

color: #FFFFFF !important;

}

.bg02 a:hover::after{

transform-origin: right top;

transform: scale(1, 1);

}

上のアニメーションの逆バージョンです。

背景色が中央から出てきて中央に消える

サンプルテキスト

HTML

<p class="bg03"><a href="#">サンプルテキスト</a></p>

1	<p class="bg03"><a href="#">サンプルテキスト</a></p>

CSS

.bg03 a{
  position: relative;
  padding: 0 8px;
  z-index: 1;
  transition: all .3s ease;
}
.bg03 a::after{
  content: '';
  background: #BC0034;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0, 1);
  transition: transform .3s;
  z-index: -1;
}
.bg03 a:hover {
  color: #FFFFFF !important;
}
.bg03 a:hover::after{
  transform: scale(1, 1);  
}

.bg03 a{

position: relative;

padding: 0 8px;

z-index: 1;

transition: all .3s ease;

}

.bg03 a::after{

content: '';

background: #BC0034;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transform: scale(0, 1);

transition: transform .3s;

z-index: -1;

}

.bg03 a:hover {

color: #FFFFFF !important;

}

.bg03 a:hover::after{

transform: scale(1, 1);

}

中央からのアニメーションです。 transform-originを指定しなければいいだけです。

背景色が下から出てきて上に消える

サンプルテキスト

HTML

<p class="bg04"><a href="#">サンプルテキスト</a></p>

1	<p class="bg04"><a href="#">サンプルテキスト</a></p>

CSS

.bg04 a{
  position: relative;
  padding: 0 8px;
  z-index: 1;
  transition: all .3s ease;
}
.bg04 a::after{
  content: '';
  background: #BC0034;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(1, 0);
  transform-origin: bottom;
  transition: transform .3s;
  z-index: -1;
}
.bg04 a:hover {
  color: #FFFFFF !important;
}
.bg04 a:hover::after{
  transform-origin: top;
  transform: scale(1, 1);
}

.bg04 a{

position: relative;

padding: 0 8px;

z-index: 1;

transition: all .3s ease;

}

.bg04 a::after{

content: '';

background: #BC0034;

width: 100%;

height: 100%;

position: absolute;

bottom: 0;

left: 0;

transform: scale(1, 0);

transform-origin: bottom;

transition: transform .3s;

z-index: -1;

}

.bg04 a:hover {

color: #FFFFFF !important;

}

.bg04 a:hover::after{

transform-origin: top;

transform: scale(1, 1);

}

transform-originをbottomとtopにして調整しています。

背景色が上から出てきて下に消える

サンプルテキスト

HTML

<p class="links bg05"><a href="#">サンプルテキスト</a></p>

1	<p class="links bg05"><a href="#">サンプルテキスト</a></p>

CSS

.bg05 a{
  position: relative;
  padding: 0 8px;
  z-index: 1;
  transition: all .3s ease;
}
.bg05 a::after{
  content: '';
  background: #BC0034;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform .3s;
  z-index: -1;
}
.bg05 a:hover {
  color: #FFFFFF !important;
}
.bg05 a:hover::after{
  transform-origin: bottom;
  transform: scale(1, 1);
}

.bg05 a{

position: relative;

padding: 0 8px;

z-index: 1;

transition: all .3s ease;

}

.bg05 a::after{

content: '';

background: #BC0034;

width: 100%;

height: 100%;

position: absolute;

bottom: 0;

left: 0;

transform: scale(1, 0);

transform-origin: top;

transition: transform .3s;

z-index: -1;

}

.bg05 a:hover {

color: #FFFFFF !important;

}

.bg05 a:hover::after{

transform-origin: bottom;

transform: scale(1, 1);

}

上のアニメーションを上下逆にしてみました。

それぞれの値は好みに合わせていじってみてください。

DEMO

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【コピペ可】CSSのhoverアニメーション-テキスト編-

下線系

左から下線が現れてカーソルを外すと左側に消える

左から下線が現れてカーソルを外すと右側に消える

右から下線が現れてカーソルを外すと左側に消える

中央から下線が現れてカーソルを外すと中央に消える

両端から下線が現れてカーソルを外すと両端に消える

下線が上からふわっと表れてカーソルを外すと上に消える

下線が下からふわっと表れてカーソルを外すと下に消える

背景色系

背景色が右から出てきて左に消える

背景色が中央から出てきて中央に消える

背景色が下から出てきて上に消える

背景色が上から出てきて下に消える

関連記事

【phpdotenv】PHPで環境変数を取り扱うお話

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

Webアクセシビリティの基本を学ぼう！