動いているものがブレて見える——これは目や脳の知覚そのままで、「速度感」を伝えるための視覚言語です。filter: blur() と transform を組み合わせると、ボタンにこの「ブレ」をCSSだけで再現できます。ゲーム系・スポーツ系・テクノロジー系のサイトで、ボタンに「動き出すような躍動感」を加えたいときに効く手法です。
今回は5種類のモーションブラー系アニメーションを紹介します。左から飛び込んでくる「Speed Dash」、ワープ変形の「Warp Drive」、ぼかしからフォーカスが合う「Focus Pull」、クリックで飛び去る「Exit Flash」、テキスト自体がにじんで広がる「Text Streak」——すべてJavaScript不要、CSSのみで実装しています。
Speed Dash（スピード・ダッシュ）
ホバー時にボタンが左からブレながら飛び込んでくるアニメーションです。@keyframesの0%で translateX(-14px) と blur(5px) を設定し、100%で元の位置・ブレなしに収束させます。60%地点で少しオーバーシュートさせることで「勢いよく飛び込んで、わずかに行き過ぎて止まる」自然な動きになります。cubic-bezier(0.22, 1, 0.36, 1) の ease がぬるっとした収束感を生んでいます。
ゲーム系サイトのスタートボタン・スポーツ系LPのCTAなど、「今から何かが始まる」雰囲気を出したい場面に向いています。左から来ることで読み方向（左→右）と同じベクトルになり、視線の流れを邪魔しません。
See the Pen Speed Dash by BaseKENT (@basekent) on CodePen.
調整方法
- 飛び込み距離:
translateX(-14px)の値を大きくすると勢いが増します。-8pxまで下げると控えめな登場に - ブレの強さ:
blur(5px)をblur(2px)にすると残像が薄くなり上品な印象に、blur(8px)にするとよりドラマチックに - アニメーション速度:
0.45sを0.3sにすると素早い飛び込みに、0.6sにするとゆったりした流れ込みになります
Warp Drive（ワープ・ドライブ）
ホバーでボタンが一瞬横に引き伸びてから元に戻るSF的な変形エフェクトです。@keyframes の25%で scaleX(1.45) と blur(6px) のピークを作り、そこから65%で scaleX(0.95) と blur(1px) に収縮してから最終的に元に戻る3段階の動きです。「広がってから縮む」このリズムが宇宙船のワープ感を表現しています。
サイバーパンク系・テクノロジー系・SF設定のゲームUIなど、非現実的な「速度の表現」が欲しい場面に最適です。紫（#7c3aed）の背景色は宇宙・深夜・エネルギーを感じさせ、このエフェクトとの相性が良いです。
See the Pen Warp Drive by BaseKENT (@basekent) on CodePen.
調整方法
- 変形の幅:
scaleX(1.45)の値が大きいほど引き伸びが強くなります。1.2まで下げると控えめなワープ、1.6にするとよりダイナミックに - ブレの密度:
blur(6px)をblur(3px)にするとほんのり残像感に、blur(10px)にするとほぼ溶けるような変形になります - ボタン色: ダーク系ではパープル（
#7c3aed）・シアン（#06b6d4）が映えます。ライト系サイトには#1e293bなどダークカラーを使うとコントラストが取れます
Focus Pull（フォーカス・プル）
ページ上に最初からぼやけた状態で存在し、ホバーでフォーカスが合うカメラ演出です。初期状態で filter: blur(2.5px) + scale(0.97) + opacity: 0.7 を設定し、:hover ですべてが解除される transition ベースの実装です。「見つけてもらうまで静かに待っている」という存在感があり、スクロールして見つけた問い合わせボタンや申し込みボタンに向いています。
他の4本が「ホバー時に動き出す」のに対し、このボタンは「最初からぼけており、ホバーで生き返る」逆の方向性です。ブログの問い合わせフォーム・ポートフォリオのコンタクトボタンなど、押し付けがましくない場所で静かに存在感を放ちたいときに試してください。
See the Pen Focus Pull by BaseKENT (@basekent) on CodePen.
調整方法
- 初期のぼかし量:
blur(2.5px)をblur(1.5px)にすると存在感が強まり、blur(4px)にするとほぼ気づかれない控えめな初期状態になります - フォーカス速度:
transition: 0.45s easeの秒数を長くするとゆっくりフォーカスが合い、短くするとパシッと瞬時に鮮明になります - スケール幅:
scale(0.97)をscale(0.93)まで下げると初期状態がさらに小さく縮んで見え、「より遠くにある」印象が出ます
Exit Flash（エグジット・フラッシュ）
クリック（:active）した瞬間にボタンが右へ飛び去り、離すと跳ね返るように戻ってくるアクションフィードバックです。実装のポイントは :active セレクタに transition: 0.08s ease-in を設定し、通常状態の .btn には transition: 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) を設定することです。この2種類の transition を使い分けることで、「クリック→即座に飛び去る（高速）」「リリース→ばねのように跳ね返る（ゆっくり）」という非対称な動きがCSSのみで実現します。
ゲームのスタートボタン・アクション系UIのCTAなど、「押した感触」を大げさに演出したい場面に向いています。タクタイルフィードバックをビジュアルで代替する考え方で、スマートフォンのバイブレーションがない環境でも「手応え」を感じさせます。
See the Pen Exit Flash by BaseKENT (@basekent) on CodePen.
調整方法
- 飛び去る距離:
translateX(52px)の値を大きくするとより遠くへ飛び去ります。30pxまで下げると控えめな飛び出しに - 跳ね返りの弾力:
cubic-bezier(0.34, 1.4, 0.64, 1)の第2引数（1.4）を大きくするほどオーバーシュートが増してバウンドが強くなります。1.0に下げると通常の戻り方に - 退場速度:
:activeの0.08sを0.05sにすると瞬時に消える感覚に、0.15sにするとゆっくり流れ去るように変わります
Text Streak（テキスト・ストリーク）
ボタン全体ではなく、テキストだけにブレとスピード感を演出するアニメーションです。@keyframesで letter-spacing（字間）を 0.05em → 0.35em に急拡大しながら blur(2px) をかけ、0.18em の字間で落ち着かせます。テキストが一瞬ぶれながら広がってから、すこし字間が開いた状態でスタビライズする動きは、スポーツ写真の「走り去る瞬間」を切り取ったような印象を与えます。
ライト系背景（#f8fafc）で実装していますが、ダーク背景にも対応できます。複数のナビゲーションリンクに適用しても重くなりすぎず、「素のボタン」から少しだけ差別化したいメニューやカードのCTAに向いています。
See the Pen Text Streak by BaseKENT (@basekent) on CodePen.
調整方法
- 字間の広がり:
0.35emを0.5emにすると大きく広がるダイナミックな演出に、0.2emにするとさりげない広がりになります - 最終の字間:
0.18emが落ち着いた先の字間です。0.05em（元と同じ）に戻すことも、0.25emにしてゆったりとした字間を維持することもできます - ブレの強さ:
blur(2px)をblur(4px)にするとより激しい残像感に、blur(1px)にするとほんのりにじむ程度の繊細な表現になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
