目を引く（Attention）
バウンス・シェイク・パルス・点滅アニメーションをFramer MotionとCSS Animationで実装・比較
Framer Motion
読み込み中...
tsx
'use client';
import { useAnimation, motion } from 'framer-motion';
export default function AttentionDemo() {
const controls = useAnimation();
const triggerBounce = async () => {
await controls.start({
y: [0, -24, 0, -12, 0, -6, 0],
transition: { duration: 0.7, ease: 'easeOut' },
});
};
const triggerShake = async () => {
await controls.start({
x: [0, -12, 12, -12, 12, -6, 6, 0],
transition: { duration: 0.5, ease: 'easeInOut' },
});
};
const triggerPulse = async () => {
await controls.start({
scale: [1, 1.25, 1, 1.25, 1, 1.1, 1],
transition: { duration: 0.7, ease: 'easeInOut' },
});
};
const triggerFlash = async () => {
await controls.start({
opacity: [1, 0, 1, 0, 1, 0, 1],
transition: { duration: 0.6 },
});
};
return (
<div>
<motion.div animate={controls}>
アニメーション対象
</motion.div>
<button onClick={triggerBounce}>バウンス</button>
<button onClick={triggerShake}>シェイク</button>
<button onClick={triggerPulse}>パルス</button>
<button onClick={triggerFlash}>点滅</button>
</div>
);
}jQueryで書くとこうなる
jQueryではjQuery UIの
.effect() メソッドや、.addClass() でCSSアニメーションをトリガーする方法が使われていました。Reactでは Framer Motion の useAnimation フックを使うことで、より宣言的に同等の表現が可能です。js
// jQueryプラグイン（jQuery UI）を使ったバウンス
$('#box').effect('bounce', { times: 3 }, 400);
// シェイク
$('#box').effect('shake', { times: 3, distance: 10 }, 400);
// パルス（強調）
$('#box').effect('pulsate', { times: 3 }, 400);
// 点滅
$('#box').fadeOut(150).fadeIn(150).fadeOut(150).fadeIn(150);
// addClass でCSSアニメーションをトリガーする方法（プラグイン不要）
$('#box').addClass('animate-bounce');
setTimeout(() => $('#box').removeClass('animate-bounce'), 1000);💡 上記のデモは、React / Next.jsです。Next.jsの基本セットアップは 公式ドキュメントを参照してください。
実装方法の比較
| 項目 | Framer Motion | CSS Animation |
|---|---|---|
| トリガー制御 | useAnimationで任意のタイミングで発火可能 | クラス着脱で制御（やや煩雑） |
| アニメーション定義 | JSオブジェクトで直感的に記述 | @keyframesで定義が必要 |
| 連続・チェーン | awaitで順番に実行可能 | animation-delayで代替 |
| 設定コスト | 高：framer-motionのインストールが必要 | 低：追加ライブラリ不要 |
| 再利用性 | フック・バリアントで再利用しやすい | CSSクラスとして再利用可能 |
useAnimation のポイント
- •
useAnimation()で取得したコントロールをmotion要素のanimateプロップに渡すと、controls.start()で命令的にアニメーションを発火できる - •
controls.start()は Promise を返すため、awaitで完了を待ってから次の処理に進める - • キーフレームは配列で指定する（例：
y: [0, -24, 0]） - • CSS Animationでは同じアニメーションを再トリガーするためにクラスを一度外してから付け直す必要があり、
requestAnimationFrameで1フレーム待つ処理が必要
🤖 AIプロンプトテンプレート
Next.js + Framer Motion で「目を引く」アニメーションを実装してください。 - ボタンクリックでバウンス・シェイク・パルス・点滅アニメーションをトリガー - useAnimation フックを使って命令的にアニメーションを制御 - 各アニメーションはボタンクリック後に1回だけ実行される - TypeScript / Tailwind CSS v4 を使用
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
同じカテゴリの他のページ
スクロール連動（Scroll Animation）
スクロール連動アニメーションのサンプル。whileInView・IntersectionObserverを使ったUIパターン実例集。Framer MotionとIntersection Observer APIで実装比較。
切り替え演出（Transition）
切り替え演出アニメーションのサンプル。フェード・スライド・スケールのUIパターン実例集。Framer MotionとCSS Transitionで実装比較。
見せる・隠す（Show / Hide）
見せる・隠すアニメーションのサンプル。フェード・スライド・トグルのUIパターン実例集。Framer MotionとCSS Transitionで実装比較。