こんにちは、ユアサです。
CSSでホバーアクションを組む際、やりたい動作は決まっているのにうまく書けない、他のホームページとちょっと差をつけたいけど組み方が・・・と悩んでいた経験は一度はあるかと思います。僕も最近担当した案件でホバーアクションの動作の再現に行き詰まってしまうことがありました。
今回は（自分の練習も兼ねて）transformプロパティを使って、ボタンを想定したホバーアクションのパターンをいくつか作成していきます。既にスラスラ書ける方には物足りないかもしれませんが、何らかのヒントになればと思います。
①中心から背景を塗りつぶす
比較的丸い形のボタンに多いパターンです。ボタンのafter要素にtransformプロパティ（以下「transform」表記）でscale(0, 0)を、ホバー後にscale(1, 1)と設定しています。
scale()関数は縮尺比率で、1つ目の数値がX方向（横方向）、2つ目の数値がY方向（縦方向）の比率です。設定できる数値は0から1までとなっています。
またtransform-originプロパティ（以下「transform-origin」表記）でcenter centerを設定しているので、ホバーアクションで中心部からX方向・Y方向に100%のサイズで拡大されるようになっています。
See the Pen hover by felly (@felly00505) on CodePen.
②左から右に背景を塗りつぶす
割とスタンダードなパターンかと思います。こちらはafter要素のtransformをscale(0, 1)に、ホバー後にscale(1, 1)としています。そのためデフォルトの状態で既にY方向に100％拡大されており、transform-originでleft centerを指定しているのでホバーアクションで左から右に塗りつぶされているかのように見せることができます。
See the Pen hover2 by felly (@felly00505) on CodePen.
③ストライプにする
before・after要素をそれぞれY方向に伸ばします。作りとしては単純で、あらかじめwidthを指定してheightを0としておき、ホバー後にheight: 100%と設定しています。またそれぞれtop: 0かbottom: 0と設定しているのですれ違うような動作にしています。
See the Pen hover3 by felly (@felly00505) on CodePen.
④外枠を描画しているような動作
before・after要素に外枠の太さを設定し、ホバー後にwidth・heightを100%と設定しています。今回作成したものは、divとその子要素のpにそれぞれbefore・after要素があり、外枠の縦線はwidthで、横線はheightで太さが設定されています。
またtransition-delayプロパティでそれぞれホバーアクションの発生を遅らせることにより、一筆書きで外枠が描画されているように見せることができます。
See the Pen hover4 by felly (@felly00505) on CodePen.
まとめ
今回はtransformでいくつかのパターンのホバーアクションを作成しました。
書いていて思いましたが、工夫するだけでどんどん面白い動作が作れるのでつい夢中になりますね・・・・・！実用性はないですがより複雑なものも作れるようになりたいです。
今回も最後まで読んでいただきありがとうございました（^人^）
