ボタンやナビゲーションによく使われてるマウスホバーアニメーションを紹介します。
マウスホバーDEMO
まずは実装内容を確認しましょう、DEMOページをご覧ください。
See the Pen マウスホバーアニメーション by SOLLUNA (@ygi) on CodePen.
背景色の変更
背景色がフェードイン/アウトするアニメーションです。
/* btn-0: 背景色の変更 */
a.btn-0 {
color: #9F00FF;
background: #000000;
border: solid 1px #9F00FF;
border-radius: 3px;
font-size: 16px;
letter-spacing: 0.2em;
padding: 18px 30px;
text-decoration: none;
transition: all 0.5s;
}
a.btn-0:hover {
color: #FFEF00;
background: #9F00FF;
}回転
ボタンが回転するアニメーションです。
a.btn-1:hover {
color: #FFEF00;
background: #9F00FF;
transform: rotate(360deg);
}transform: rotate(360deg);360度回転させます。
拡大
ボタンが拡大されるアニメーションです。
a.btn-2:hover {
color: #FFEF00;
background: #9F00FF;
transform: scale(1.5);
}transform: scale(1.5);サイズを1.5倍に拡大します。
ボタン影
ボタンの影が拡散されるアニメーションです。
a.btn-3:hover {
box-shadow: 0 0 20px rgba(159, 0, 255, 0.9);
}box-shadow: 0 0 20px rgba(159, 0, 255, 0.9);要素に透明度は0.9の影を追加します。
テキスト影
ボタンのテキストがぼかされるアニメーションです。
a.btn-4:hover {
color: #FFEF00;
text-shadow: 0 0 5px rgba(255, 239, 0, 0.9);
}text-shadow: 0 0 5px rgba(255, 239, 0, 0.9);テキストに透明度は0.9の影を追加します。
浮き上がる
ボタンが浮き上がるアニメーションです。
a.btn-5:hover {
box-shadow: 0px 1px 20px rgba(159, 0, 255, 0.9);
transform: translateY(-4px);
}box-shadow: 0px 1px 20px rgba(159, 0, 255, 0.9);transform: translateY(-4px);
影を追加し垂直方向に-4px移動させます。
沈む
ボタンが沈むアニメーションです。
a.btn-6:hover {
box-shadow: 0px 1px 20px rgba(159, 0, 255, 0.9);
transform: translateY(4px);
}box-shadow: 0px 1px 20px rgba(159, 0, 255, 0.9);transform: translateY(4px);
影を追加し垂直方向に4px移動させます。
押下
ボタンが押し込まれるアニメーションです。
a.btn-7 {
box-shadow: 0px 4px 0 rgba(159, 0, 255);
}
a.btn-7:hover {
box-shadow: none;
transform: translateY(4px);
}box-shadow: none;transform: translateY(4px);
影を削除し垂直方向に4px移動させます。
テキスト下線
テキストに下線が表示されるアニメーションです。
a.btn-8 {
color: #9F00FF;
padding: 18px 30px;
text-decoration: none;
position: relative;
}
a.btn-8::before {
background: #9F00FF;
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}
a.btn-8:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}transform-origin: right top;transform: scale(0, 1);
要素を右上に設定し横方向にサイズを0に縮小します。transform-origin: left top;transform: scale(1, 1);
要素を左上に設定し元のサイズ(横方向1倍、縦方向1倍)に戻します。
スライド
ボタンの背景が左から右へのスライドするアニメーションです。
a.btn-9 {
color: #9F00FF;
background: #000000;
border: solid 1px #9F00FF;
border-radius: 3px;
font-size: 16px;
letter-spacing: 0.2em;
padding: 18px 30px;
text-decoration: none;
position: relative;
z-index: 1;
transition: .3s;
border: solid 1px #9F00FF;
}
a.btn-9::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #9F00FF;
transition: transform ease .3s;
transform-origin: 100% 50%;
transform: scaleX(0);
}
a.btn-9:hover {
color: #FFEF00;
}
a.btn-9:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}transform-origin: 100% 50%;
要素の右端(横軸の100%)と縦方向の中央縦軸の50%)です。transform: scaleX(0);
水平方向(X軸)に対して0倍の大きさ(完全に折りたたまれた状態)にスケーリングされます。transform-origin: 0% 50%;
要素の左端(横軸の0%の位置)と縦方向の中央(縦軸の50%)です。transform: scaleX(1);
水平方向(X軸)に対して1倍の大きさ(元の大きさ)にスケーリングされます。