CSSだけでwebページをバウンド表示させる方法

CSS だけで web ページをバウンドをしているように表示させてみます。現在このページでもバウンド表示を実装しているのでビヨンビヨンとバウンドしながら表示されたと思います。

web ページ全体をするというと若干好みが分かれそうな表示ですが、全体ではなく一部の要素だったりマウスがホバーした要素だけなどであれば、デザインによっては効果的なものになるかもしれません。

bound

webページ全体をCSSだけでバウンドさせる

CSS の animaion と transform の scale 値を使います。scale で拡大率を指定しています。

CSS

body {
    animation: bound 2.2s ease-in-out;
    transform-origin: 50% 50vh;
}

@keyframes bound {
    0% {transform: scale(0.1)}
    12.5% {transform: scale(1.7)}
    25% {transform: scale(0.4)}
    37.5% {transform: scale(1.3)}
    50% {transform: scale(0.8)}
    62.5% {transform: scale(1.1)}
    75% {transform: scale(0.9)}
    87.5% {transform: scale(1.05)}
    100%{transform: scale(1)}
}

transform-origin の 50vh がポイントです。

参考：transform-origin｜MDN

transform-origin は transform させる際の中心を決める CSS です。特に指定しない場合はその要素の縦軸と横軸の中心がそのまま中心になります。

今回のバウンド表示ではその要素の中心ではなく「画面の中心」を軸にしたかったため、50vh を使い Y 軸の中心を決めています。要素、ここでは body の中心をそのまま中心にしてしまうと画面からはみ出た部分が中心となってしまうため不格好です。50vh にすることで画面の中心を変化の中心にすることが出来ます。

% や scale の値については微調整が可能です。

animation や transform の基本的なことに関しては以下を参考にしてみてください。

参考：
transform｜MDN
animation｜MDN

スポンサーリンク

要素にhoverしたらバウンドさせる

次は web ページ全体ではなく要素をバウンドさせてみます。マウスが hover した際にバウンドします。

HTML

<div class="bound-outer-elm">
    <div class="bound-elm">bound</div>
</div>

バウンドさせたい要素と同じ大きさの囲む要素が必要です。バウンドさせる要素は display: inline 以外である必要があります。

CSS

/* バウンドさせる要素を囲む要素 */
.bound-outer-elm {
    width: 200px;
    height: 200px; /* .bound-elm と同じ大きさに */
}

/* バウンドさせる要素 */
.bound-elm {
    width: 200px;
    height: 200px;
}

/* 大きさ固定の外側の要素に hover した際、内側をアニメーションさせる */
.bound-outer-elm:hover bound-elm{
    animation: bound 2.2s ease-in-out;
}

@keyframes bound {
    0% {transform: scale(0.1)}
    12.5% {transform: scale(1.7)}
    25% {transform: scale(0.4)}
    37.5% {transform: scale(1.3)}
    50% {transform: scale(0.8)}
    62.5% {transform: scale(1.1)}
    75% {transform: scale(0.9)}
    87.5% {transform: scale(1.05)}
    100%{transform: scale(1)}
}

keyframes は使いまわします。

バウンドさせたい要素そのものに hover した際アニメーションさせるようにしてしまうと、要素が動くためカーソルが要素から外れた瞬間にアニメーションが止まってしまいカクカクとしてします。外側に同じ大きさの要素を配置することでその要素に hover した際アニメーションさせるようにします。

今回は要素の中心をそのまま中心にバウンドさせるので transform-origin はいりません。

デモ

bound

まとめ

あまりにしつこいと嫌われる動きな気もするので面白がって乱用するのはあれかもしれませんが、ワンポイントで使ったりすると楽しそうです。

keyframes の数値に関しては感覚でやっているので、物理学的にもう少ししっかりとした数値にもできるはずです。そうすればもっと見栄えが良くなるかもしれません。