アニメーションの12原則の中で、最も「生き物らしさ」を生み出す技法がスカッシュ＆ストレッチです。ディズニーが体系化したこの原則は、物体が潰れ（スカッシュ）、伸び（ストレッチ）することで質量と弾力感を表現します。CSSで再現するカギはscaleXとscaleYを非対称に組み合わせること。ボタンが均一に縮むscale(0.95)とは違い、縦に潰れながら横に広がるscaleY(0.85) scaleX(1.08)という変形が、「ゴムが押しつぶされた」リアルな物理感を生み出します。cubic-bezierで慣性やバネの跳ね返りまで再現できれば、ボタンは単なるUIパーツを超えます。
今回はスカッシュ＆ストレッチを5つの異なるシーンで体感できるデモを用意しました。クリック時に潰れて跳ね返る手応え、ホバーで揺れるゼリー感、バネ系イージングで伸びるラバー質感、ページ表示時に膨らみながら現れる入場演出、引き絞って放出するスリングショット——それぞれ独立したアニメーション設計です。すべてCSSのみで実装しており、コピーしてCodePenやWordPress/SWELLにそのまま貼り付けて使えます。
Bounce Press（バウンス・プレス）
クリックした瞬間にボタンが下に潰れ、指を離すとバネ感で跳ね返るデモです。:active状態でscaleY(0.82) scaleX(1.08)——縦に潰れながら横に広がる典型的なスカッシュ変形を適用し、離した瞬間はtransition: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)の跳ね返りイージングで元に戻ります。このcubic-bezierの第2引数1.56が1を超えているため、スケールが一瞬1を超えてから収束する「バネの戻り」が発生します。transform-origin: center bottomを設定することで、デスクに置かれたボタンを押し込む感覚が強調されます。
クリックしたときに「確かに押せた」という手応えを返すフィードバックとして、フォーム送信ボタンやCTAボタンに最適です。押した感覚がないフラットなボタンに悩んでいるなら、このデモ1本で解決できます。アクション誘導が最優先のLPや、カートに入れるボタンなどECサイトのキーアクションに。
See the Pen Bounce Press by BaseKENT (@basekent) on CodePen.
調整方法
- 潰れ具合:
.btn:activeのscaleY(0.82)を小さくするほど強く潰れます。scaleY(0.7)にするとかなり大げさな変形に、scaleY(0.92)にするとさりげない変形になります - バネの強さ:
cubic-bezier(0.34, 1.56, 0.64, 1)の第2引数1.56を大きくするほど跳ね返りが強くなります。2.0にすると大きくオーバーシュート、1.2にすると控えめな弾みになります - ボタン色:
background: #3b82f6をブランドカラーに変更してください
Jelly Hover（ジェリー・ホバー）
ホバーした瞬間にボタンがゼリーのように揺れ動く@keyframesデモです。scaleXとscaleYが交互に大きく・小さくなる5段階のキーフレームで「揺れ→収束」を表現しています。横に広がる→縦に伸びる→横に広がる……という繰り返しが自然な減衰振動を模倣しており、easeイージングと組み合わせることで振幅がだんだん小さくなって安定します。ホバーするたびに毎回アニメーションが再生されるため、何度触れても飽きない操作感があります。
ポップで楽しいサイトの雰囲気に合うデモです。子ども向けサービス・ゲーム系LP・クリエイティブなポートフォリオで「触りたくなる」ボタンとして機能します。落ち着いたビジネス系サイトには合いませんが、「個性が欲しい」という場面ではこれ一本でキャラクターが出ます。
See the Pen Jelly Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 揺れの強さ:
@keyframes jellyのscaleX(1.1)を大きくするとより激しく揺れます。scaleX(1.06)にするとさりげないジェリー感に、scaleX(1.18)にするとコミカルな大揺れになります - 揺れの速さ:
.btn:hoverのanimation: jelly 0.6s easeの秒数を0.4sにすると素早い揺れ、1sにするとゆっくりとした揺れになります - ボタン色:
background: #8b5cf6をサイトのテーマカラーに合わせてください
Rubber Pull（ラバー・プル）
ホバーでボタンが横に大きく引き伸ばされ、バネのような跳ね返りとともに定着するデモです。cubic-bezier(0.68, -0.55, 0.27, 1.55)がこのデモの核心で、第2引数が負値（-0.55）のため最初に逆方向へわずかに動いてから加速するという、ゴムを引っ張る動きに似た挙動を生み出します。ホバー時のscaleX(1.14) scaleY(0.88)——横に14%引き伸ばされながら縦に12%縮む非対称変形が、「ゴムが横に引っ張られた」感触を作り出します。
シンプルな実装でありながら動きのインパクトが大きいため、ポートフォリオや個人サイトのメインCTAに向いています。マウスが乗った瞬間の「おっ」という驚きが自然とクリックを誘います。ホバー時にリンク先を示すような矢印アイコンをボタン内に置くと、横への伸びと方向性が一致して効果的です。
See the Pen Rubber Pull by BaseKENT (@basekent) on CodePen.
調整方法
- 伸び具合:
.btn:hoverのscaleX(1.14)を大きくするほど大きく伸びます。scaleX(1.08)にすると控えめな伸び、scaleX(1.22)にすると大げさな変形になります。scaleYはscaleXが増えるほど縮めてください（体積を保つ感覚） - バネの感触:
cubic-bezier(0.68, -0.55, 0.27, 1.55)の第4引数1.55を大きくするとオーバーシュートが増え、より跳ねる感触になります - アニメーション速度:
transition: 0.5sの秒数を0.3sにするとキビキビした応答に、0.7sにするとゆっくり伸びて戻る動きになります
Squish Entry（スカッシュ・エントリー）
ページ表示時にボタンが「下から潰れた状態で現れ、ビョンと膨らみながら正常なサイズになる」入場アニメーションです。最初はscaleY(0)でボタンが見えない状態。次に高さが一気にscaleY(1.16)まで膨らんでオーバーシュート、続いてscaleY(0.94) scaleX(1.04)で反対方向へ行き過ぎ、最終的にscale(1)に収束します。この「行き過ぎ→修正→安定」のサイクルが、物体が弾んで落ち着くリアルな慣性を模倣しています。animation-fill-mode: bothにより、アニメーション開始前も終了後も正しい状態を保ちます。
ページ読み込み完了のシグナルとして、またはスクロールで表示されるCTAのアイキャッチとして使えます。animation-delayを他の要素と組み合わせて時間差で複数のボタンが順番に現れる演出もできます。ランディングページの「申し込む」ボタンや、404ページの「ホームに戻る」ボタンのような一点集中のCTAに特に映えます。
See the Pen Squish Entry by BaseKENT (@basekent) on CodePen.
調整方法
- 入場の速さ:
animation: squish-in 0.8sの秒数を0.5sにするとテンポよい入場に、1.2sにするとゆっくり膨らむ演出になります - 弾みの強さ:
@keyframes squish-inのscaleY(1.16)を大きくするほど膨らみすぎが強調されます。scaleY(1.08)にすると控えめな跳ね返りに、scaleY(1.3)にすると大げさなバウンスになります - 登場の遅延:
.btnにanimation-delay: 0.3sを追加すると、他のページ要素の後からボタンが現れる演出ができます
Slingshot（スリングショット）
ホバー時に「まず縦に引き絞られ、次に横へ一気に放出される」スリングショット（パチンコ）のような2段階アニメーションのデモです。@keyframesの20%でscaleX(0.87) scaleY(1.13)——縦に伸びてエネルギーを溜める「引き絞り」フェーズ。45%でscaleX(1.18) scaleY(0.85)——横に大きく放出される「解放」フェーズ。その後振動が収束して最終的にscaleX(1.05) scaleY(0.96)でわずかに横扁平な状態にホールドします。この「溜め→放出→収束」の時系列がスリングショットの物理的な動きを再現しています。
エネルギーが充填されて放出されるような動きは、「押したい衝動」を視覚的に予告します。ゲーム系LP・クリエイティブエージェンシーのポートフォリオ・イベントサイトのメインCTAで存在感を発揮します。animation-fill-mode: forwardsでホバー中は放出後の状態をキープするため、「乗っている間ずっと飛んでいる」ような感覚が続きます。なお、マウスが離れるとアニメーションが解除されて自然に元に戻ります。
See the Pen Slingshot by BaseKENT (@basekent) on CodePen.
調整方法
- 引き絞りの強さ:
@keyframes slingshotの20%、scaleY(1.13)を大きくするほど「溜め」が強調されます。scaleY(1.2)にすると明確な引き絞りに、scaleY(1.05)にするとさりげない予備動作になります - 放出の幅: 45%の
scaleX(1.18)を大きくするほど派手な飛び出しになります。scaleX(1.3)で大げさに、scaleX(1.1)で控えめな放出になります - アニメーション速度:
animation: slingshot 0.6sの秒数を0.4sにすると素早い放出に、0.9sにするとスローモーション的な溜めと解放になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
