コーディング初心者が初めに実装するアニメーション、hoverアクションのアイデア集

2021.07.14 デザインWeb

INDEX

1 なぜhoverアクションが必要か
2 hoverアクションのアイデア
3 まとめ

なぜhoverアクションが必要か

webサイトは一度訪問するだけで終わるよりも、同じサイトを何度も訪れる機会が多いと思います。そのため、良いwebサイトをつくるためには、何度も訪れるユーザーが不自由なく閲覧できるような工夫が必要になります。つまり、不自由なく閲覧してもらうための「操作性」が重要なんです。

その中でもリンクを貼る要素は大切で、ユーザーに「ページ遷移ができる要素」であることと「クリックしてどんなページに遷移できるのか」を事前に知らせることが大事です。そういった情報を、クリックを押す前の段階でユーザーが予想できる設計にすることが使いやすいサイトへの第一歩というわけです。

その方法の1つにhoverアクションがあります。要素にマウスがオンされたタイミングで要素を変化させることで、そのボタンがリンクであることを伝えます。要素を変化させているので一種のアニメーションとも言えますね。

今回の記事では、コーディング初心者でも比較的簡単に実装できるhoverアクションを何個かまとめていきます。

難易度も低〜中〜高と分けているので、デザインや工数や自分のスキルと照らし合わせて実装してみてください。

hoverアクションのアイデア

まずは、hoverアクションを実装するために不可欠なtransitionプロパティについて説明します。transitionは変化を表すプロパティで、設定する際には以下のようになります。

transition: transition-property transition-duration transition-timing-function transition-delay;
// transition-property：適応するプロパティ
// transition-duration：アニメーションの時間
// transition-timing-function：イージングの指定
// transition-delay：遅延時間

上記の設定をすることでhoverアクションのアニメーションが実装できるようになります。詳しい内容の解説は以下のサイトに譲ります。

transition

特にイージングの指定は詳しく確認した方がいいです。こだわりが強い人であればイージングの使い方1つでサイトのクオリティが格段にアップします。それくらい大きな影響力を持ちます。

超簡単！最少手数でhoverアクション

時間はかけられない！
実装にも自信がない！
でもわかりやすいhoverアクションを実装したい！

そういう方にはまずこちらをオススメします。

１つもしくは２つのプロパティで実装可能になっています。

box-shadowを使ったhoverアクション

// HTML
<a href="#" class="hover_base hover00">ボタン00</a>

// CSS
.hover00{
	transition: box-shadow .3s ease;
}
.hover00:hover{
	box-shadow: 2px 2px 6px #ccc;
}

ボタン00

letter-spacingを使って文字の間隔を広げるhoverアクション

// HTML
<a href="#" class="hover_base hover01">ボタン01</a>

// CSS
.hover01{
	transition: letter-spacing .3s ease;
}
.hover01:hover{
	letter-spacing: .2em;
}

ボタン01

opacityを使って、要素を透過させるhoverアクション

// HTML
<a href="" class="hover_base hover02">ボタン02</a>

// CSS
.hover02{
	transition: opacity .3s ease;
}
.hover02:hover{
	opacity: .5;
}

ボタン02

background-colorとcolorを使って、背景色と文字色を逆転させるhoverアクション

// HTML
<a href="" class="hover_base hover03">ボタン03</a>

// CSS
.hover03{
	transition: background-color color .3s ease;
}
.hover03:hover{
	background-color: #000;
        color: #fff;
}

ボタン03

border-radiusを使って、四隅を角丸にする少しポップなhoverアクション

// HTML
<a href="" class="hover_base hover04">ボタン04</a>

// CSS
.hover04{
	transition: border-radius .3s ease;
}
.hover04:hover{
	border-radius: 20px;
}

ボタン04

擬似要素をtransformするおしゃれなhoverアクション

少し手間がかかってもいいからオシャレなサイトをつくりたい、ワンランク上のサイトをつくりたい。そのためのhoverアクションを実装したい方にはこちらがオススメです。

:before、:afterという擬似要素を用いているので、コーディングを始めたばかりの方は取っ付きにくい印象を受けるかもしれませんが、慣れれば簡単。またhoverアクション以外でも擬似要素は使えるため、擬似要素もついでに覚えてワンランク上のコーダーを目指しましょう。

擬似要素を左から右に移動させるhoverアクション

// HTML
<a href="" class="hover_base hover05"><strong class="txt">ボタン05</strong></a>

// CSS
.hover05{
	overflow: hidden;
	transition: color .3s ease;
}
.hover05:before{
	content: ''; //これがないと擬似要素は表示されない。最初のうちは忘れがち。
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale(0,1);
	transform-origin: right top;
	background-color: #000;
	transition: transform .3s ease;
}
.hover05 .txt{
        position: relative;
        z-index: 2;
}
.hover05:hover{
	color: #fff;
}
.hover05:hover:before{
	transform-origin: left top;
	transform: scale(1,1);
}

ボタン05

擬似要素を少し斜めにして移動させるhoverアクション

// HTML
<a href="" class="hover_base hover06"><strong class="txt">ボタン06</strong></a>

// CSS
.hover06{
	overflow: hidden;
	transition: color .3s ease;
}
.hover06:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate(-110%,0) skew(-15deg);
	transform-origin: right top;
	background-color: #000;
	transition: transform .3s ease;
}
.hover06 .txt{
        position: relative;
        z-index: 2;
}
.hover06:hover{
	color: #fff;
}
.hover06:hover:before{
	transform-origin: left top;
	transform: translate(-5%,0) skew(-15deg);
}

ボタン06

擬似要素でラインを引くhoverアクションその1

// HTML
<a href="" class="hover_base hover07"><strong class="line">ボタン07</strong></a>

// CSS
.hover07{
	overflow: hidden;
	padding: 0;
}
.hover07:before, .hover07:after{
	content: '';
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: transform .3s ease;
}
.hover07 .line{
	display: block;
	padding: 20px 0;
}
.hover07 .line:before, .hover07 .line:after{
	content: '';
	position: absolute;
	z-index: 2;
	width: 2px;
	height: 100%;
	background-color: #000;
	transition: transform .2s ease;
}
.hover07:before{
	top: 0;
	left: 0;
	transform: translate(-100%,0);
}
.hover07:after{
	bottom: 0;
	right: 0;
	transform: translate(100%,0);
}
.hover07 .line:before{
	top: 0;
	right: 0;
	transform: translate(0,-100%);
}
.hover07 .line:after{
	top: 0;
	left: 0;
	transform: translate(0,100%);
}
.hover07:hover:before , .hover07:hover:after , .hover07:hover .line:before , .hover07:hover .line:after{
	transform: translate(0,0);
	transition-delay: 0s;
}

ボタン07

擬似要素でラインを引くhoverアクションその2

// HTML
<a href="" class="hover_base hover08"><strong class="line">ボタン08</strong></a>

// CSS
.hover08{
	overflow: hidden;
	padding: 0;
}
.hover08:before, .hover08:after{
	content: '';
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: transform .3s ease;
}
.hover08 .line{
	display: block;
	padding: 20px 0;
}
.hover08 .line:before, .hover08 .line:after{
	content: '';
	position: absolute;
	z-index: 2;
	width: 2px;
	height: 100%;
	background-color: #000;
	transition: transform .2s ease;
}
.hover08:before{
	top: 0;
	left: 0;
	transform: translate(-100%,0);
	transition-delay: .8s;
}
.hover08:after{
	bottom: 0;
	right: 0;
	transform: translate(100%,0);
	transition-delay: .3s;
}
.hover08 .line:before{
	top: 0;
	right: 0;
	transform: translate(0,-100%);
	transition-delay: .5s;
}
.hover08 .line:after{
	top: 0;
	left: 0;
	transform: translate(0,100%);
	transition-delay: 0s;
}
.hover08:hover:before{
	transform: translate(0,0);
	transition-delay: 0s;
}
.hover08:hover:after{
	transform: translate(0,0);
	transition-delay: .5s;
}
.hover08:hover .line:before{
	transform: translate(0,0);
	transition-delay: .3s;
}
.hover08:hover .line:after{
	transform: translate(0,0);
	transition-delay: .8s;
}

ボタン08

animationを使った工夫を凝らしたhoverアクション

animationとkeyframesを使って実装した難易度高めの実装方法です。インパクトもあり、実装できることも増えるので、Web上での表現の幅が広がります。hoverアクション以外にも使えるのでこの際慣れておきましょう。

激しいサイトに使えるかも！？ブルブル震えるhoverアクション

// HTML
<a href="" class="hover_base hover09">ボタン09</a>

.hover09:hover{
	animation: buruburu .2s infinite forwards;
}
@keyframes buruburu {
	0%{
		transform: translate(-2px,-1px);
	}
	10%{
		transform: translate(2px,1px);
	}
	20%{
		transform: translate(-2px,-1px);
	}
	30%{
		transform: translate(2px,1px);
	}
	40%{
		transform: translate(-2px,-1px);
	}
	50%{
		transform: translate(2px,1px);
	}
	60%{
		transform: translate(-2px,-1px);
	}
	70%{
		transform: translate(2px,1px);
	}
	70%{
		transform: translate(-2px,-1px);
	}
	70%{
		transform: translate(2px,1px);
	}
	100%{
		transform: translate(0,0);
	}
}

ボタン09

まとめ

hoverアクションはサイトの世界観に影響が出るほどの重要なものにもかかわらず、もったいないことに簡潔に実装されているサイトが多いです。

スマホでの閲覧が圧倒的多数になったとはいえ、まだまだパソコンで閲覧する方もいらっしゃいますし、むしろ企業のお問い合わせや採用の窓口などの重要なサイトはパソコンで見られるケースが多いです。

そういう意味でもhoverアクションはこだわりを持って実装するべきです。とくに他のサイトと差別化したりワンランク上のサイトを目指すのであれば、こだわって実装することが必須と言っても過言ではありません。

西川寛喜@色白のブラックなエンジニア

トゥモローゲート株式会社意匠制作部リーダー。食品会社の営業職として働きながら独学でプログラミングを習得しフロントエンドエンジニアとしてWEB制作会社に転職。その後17年にトゥモローゲートに入社した。現在はWEBサイト制作がメインだが、今後はシステム構築をはじめとするバックエンドの開発にも携わっていく。

X（旧Twitter）をみる