CSSのみで簡単ホバーアニメーション集
CSSのみで実装可！
コピペでも使える簡単にリッチ感の出るホバーアニメーション集です。
ホバーアニメーションの基本は「ホバーされる前」と「ホバーされた時」の状態を作ってその間を滑らかに繋いで作っていきます。
背景色が左から出て左に戻る
背景色が左から出て右に消えていく
HTML
CSS
解説
<a class="btn" href="#"><span>ボタン</span></a>/* ボタン本体 */
.btn{
/* サイズ指定する為インライン→ブロックに変換 */
display: block;
/* 擬似要素を親要素基準で位置指定したいので親要素の設定 */
position: relative;
/* ホバー前の背景色 */
background-color: #fff;
/* 横幅 */
width: 150px;
/* 高さ(line-height使うと文字が上下中央寄せになる) */
line-height: 48px;
/* 文字の横方向中央寄せ */
text-align: center;
/* 枠線 */
border: 1px solid #555;
/* 角丸(今回は高さの半分の大きさに) */
border-radius: 24px;
/* はみ出た部分は非表示に */
overflow: hidden;
}
/* 擬似要素afterで四角を作成を作成 */
.btn::after{
/* 本来は文字等を入れるやつ、入れない場合も擬似要素作る時は必須 */
content: "";
/* サイズ指定する為インライン→ブロックに変換 */
display: block;
/* 親要素基準で位置指定する宣言 */
position: absolute;
/* 親要素基準での上からの位置 */
top: 0;
/* 親要素基準での左からの位置 */
left: 0;
/* 横幅 */
width: 100%;
/* 高さ */
height: 100%;
/* 背景色 */
background-color: #999;
/* ホバーする前とされた時を0.8秒かけて滑らかに繋ぐ、今回はtransformの変化に対してのみ適用 */
transition: transform 0.8s;
/* ホバーされる前のtransformで変化させるときの基準点（右上基準） */
transform-origin: top right;
/* ホバーされる前は横幅を０倍に */
transform: scale(0,1);
}
.btn:hover::after{
/* ホバーされた後のtransformで変化させるときの基準点（左上基準） */
transform-origin: top left;
/* ホバーされた後は横幅を元の大きさ(１倍)に */
transform: scale(1,1);
}
/* ボタンの中のspanタグ */
.btn span{
/* 重なり順を操作するz-indexを使うために入れる */
position: relative;
/* 重なり順を一個上に */
z-index: 1;
}マウスを乗せると背景色が左から伸びて右に消えていく動き。今回は"擬似要素"を使います。
擬似要素で箱を一つ作り、ホバーされるとその擬似要素の横幅が伸びるだけの単純なアニメーションです。
ポイントは、
①aタグと同じサイズの擬似要素の箱を作る。
②擬似要素の横幅を予め０倍にしておく
③擬似要素の親要素であるaタグにoverflow: hidden;ではみ出し部分非表示に。
④擬似要素の横幅をホバーで１倍に変化させる。
⑤ホバーされる前は変形の基準点が右側、された後は左側になるようにtransform-originを設定
マウスを乗せると背景色が左から伸びて、マウスを離すと左に戻る動き。今回は"擬似要素"を使います。
擬似要素で箱を一つ作り、ホバーされるとその擬似要素のwidthが伸びるだけの単純なアニメーションです。
ポイントは、
①擬似要素を作る。
②擬似要素の親要素であるaタグにoverflow: hidden;ではみ出し部分非表示に。
③擬似要素の横幅をホバーで変化させる。