【CSS】オンマウスで要素をブルブルさせる【animation】

過去の記事はこちら
CSSのanimationでふわふわさせたりブルブルさせたりする

 

前回、要素をふわふわさせたりブルブルさせたりする方法と、

animationについての解説を紹介しました。

今回は、要素にhoverしたタイミングでアニメーションを再生させる方法を紹介します。

 

と言っても記述は簡単で、
アニメーションさせたい要素に疑似クラスの「:hover」をつけた上でanimationの設定をするだけ。
こうすることで、hover時が動きのスタート値となりタイミングを制御することができます。

サンプル

hoverしたタイミングでアニメーションを再生させるデモはこちら

こちらも@keyframesの記述によって背景色を変えたり不透明度を変えたりできます。

応用編

PCで見ている方は、このページの右上にある電話ボタンをhoverすると電話番号が表示されると思いますが、
これも、アニメーションを使って表現しています。

こちらに関してはマウスオーバーした要素の子要素に対して「:hover」の効果を付けているため、以下の記述になります。(「>」を使って階層制御をしています)

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.hoge{
    display: none;
}

.hoge_parent:hover > .hoge {
    display: block;
    animation: show .5s linear 0s;
}

 

この方法を使えばCSSのみでドロップダウンを実装することも可能！
js噛ませるほどでもないな、という時など便利かもしれません。
ぜひ色々試してみてください。

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています