[css] hoverのin-outで違うアクションをさせたいんじゃ!

2021年8月16日

テクノロジー

eyecatch ライブラリ研究科の、ユゲタです。 色々なライブラリの中のコードを見ていると、簡単にできる新しい技術の発見をする事があります。 今回は、とあるwebサイトを見ていた時に、cssのhoverアクションが、入口と出口で違うモーションをしていて、 これまで、そんなことやろうと思ったこともなかったんですが、いったいどうやって実現しているのか、 どうしても気になって、寝る時間を削って、調べてみました。 それを惜しげもなく、ブログで公開しておこうと思います。 ・・・え?恩着せがましすぎる?・・・自分で言っておかないと誰も言ってくれないので・・・

通常のhover処理

<a class="sample-1" href="">マウスカーソルを乗せて</a> <style> a.sample-1{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid red; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; } a.sample-1:hover{ color:white; } a.sample-1::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; transform:scaleX(0); background-color:red; z-index:-1; transition-property:transform; transition-duration:0.5s; transform-origin: left center; } a.sample-1:hover::before{ transform:scaleX(1); } </style> まず、サンプルのコードはこれです。 transitionをhoverの有り無しで、transform-scaleのサイズを変更しています。 マウスのhover-onした時に、背景色が、メーターのように、0 -> fullになって、 hover-outした時に、full -> 0にもどるという、一般的なtransitionアニメーションです。 マウスカーソルを乗せて

in-outで違うモーション

<a class="sample-2" href="">マウスカーソルを乗せて</a> <style> a.sample-2{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid red; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; z-index:1; } a.sample-2:hover{ color:white; } a.sample-2::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:-1; transform:scaleX(0); background-color:red; transition-property:transform; transition-duration:0.5s; transform-origin: right center; } a.sample-2:hover::before{ transform:scaleX(1); transform-origin: left center; } </style> こんどは、先程のコードに1行追加して、みました。 一番最後の値の transform-origin: left center; が追加されています。 こうすることで、hover-outした時に、hover-inとは、逆方向にアニメーションしているのがわかると思います。 マウスカーソルを乗せて

いろいろ応用

この方式を利用すると、アンダーラインのアニメーションもこのようにできます。 <a class="sample-3" href="">マウスカーソルを乗せて</a> <style> a.sample-3{ position:relative; display:inline-block; padding:2px 5px; text-align:center; text-decoration:none; font-weight:bold; z-index:1; color:black; } a.sample-3::before{ content:""; position:absolute; left:0; bottom:0; display:block; width:100%; height:1px; z-index:-1; transform:scaleX(0); background-color:black; transition-property:transform; transition-duration:0.5s; transform-origin: right bottom; } a.sample-3:hover::before{ transform:scaleX(1); transform-origin: left bottom; } </style> マウスカーソルを乗せて もちろん、縦方向にもできます。 <a class="sample-4" href="">マウスカーソルを乗せて</a> <style> a.sample-4{ position:relative; display:inline-block; padding:10px; line-height:50px; border:1px solid orange; text-align:center; text-decoration:none; font-weight:bold; overflow:hidden; z-index:1; } a.sample-4:hover{ color:white; } a.sample-4::before{ content:""; position:absolute; top:0; left:0; display:block; width:100%; height:100%; z-index:-1; transform:scaleY(0); background-color:orange; transition-property:transform; transition-duration:0.5s; transform-origin: left bottom; } a.sample-4:hover::before{ transform:scaleY(1); transform-origin: left top; } </style> マウスカーソルを乗せて 趣向が変わって、いい感じにもできるかもですね。 工夫次第で、アイデアは無限大! 効果的なwebサイトが作れそうですわい!!!