CSS ホバーアニメーション
たまにはcssを...
完成版
https://codepen.io/mitsuru-hashimoto/pen/eYYaJKZ
テキトーにspanタグを用意します
wai
spanにcssをあてます
疑似要素 (Pseudo-elements) を用意します
span自体のpositionをrelativeに、
疑似要素(beforeのこと)のpositionをabsolute、left、topを0, height、widthを100%にすることで、
spanタグにぴったり被さります
// css span { color: #6495ED; font-size: 60px; border: 5px solid #6495ED; padding: 50px 100px; position: relative; } span:before { content: ''; position: absolute; left: 0; top: 0; background-color: #6495ED; height: 100%; width: 100%; }
span:beforeを移動させる
transform: translateX(-100%);を追加することで、width分だけ-100%(spanの左側に)移動します
// css span { color: #6495ED; font-size: 60px; border: 5px solid #6495ED; padding: 50px 100px; position: relative; } span:before { content: ''; position: absolute; left: 0; top: 0; background-color: #6495ED; height: 100%; width: 100%; transform: translateX(-100%); // これを追加 }
beforeがはみ出てみっともないので,span側のcssにoverflow:hiddenを追加してはみ出し部分を見えなくする
spanタグにホバーした時にbefore要素にアニメーションして欲しいので、下を追加
span:hover:before { transform: translateX(0); }
アニメーションが一瞬で切り替わってしまうのでtransition: all 1sを追加してアニメションを滑らかにする
span:before { content: ''; position: absolute; left: 0; top: 0; background-color: #6495ED; height: 100%; width: 100%; transform: translateX(-100%); transition: all 1s; // これを追加 }
文字列がbefore要素で見えなくなったので、ホバー時の文字列の色を変える
before要素がspanタグのz軸に置ける位置を後ろにする
span:before { content: ''; position: absolute; left: 0; top: 0; background-color: #6495ED; height: 100%; width: 100%; transform: translateX(-100%); transition: all 1s; z-index: -1; // これを追加 } span:hover { color: white; }