How to create a shake bounce feedback シェイク／バウンスフィードバックの作り方
Shake on error and bounce on success. Animista-style keyframe feedback. エラー時シェイク・成功時バウンスのフィードバックアニメーション。Animista 系のキーフレームパターン。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Shake on error and bounce on success. Animista-style keyframe feedback.
エラー時シェイク・成功時バウンスのフィードバックアニメーション。Animista 系のキーフレームパターン。
どこで使うかWhere to use
hero section, micro interaction, visual feedback, brand expression
フォームバリデーションエラー、ボタンフィードバック、ゲームUI、通知アイコン
特徴Key features
CSS @keyframes animation providing shake and bounce feedback on user interactions. Triggered via JavaScript class toggle for maximum reusability. Multiple preset variants (shake, bounce, pop). No external animation library needed.
CSS @keyframesによるシェイク・バウンスフィードバックアニメーション。JavaScriptクラストグルで発火させ高い再利用性を実現。複数プリセット（shake・bounce・pop）。外部アニメーションライブラリ不要。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--shake-duration | — | shake animation duration |
--bounce-duration | — | bounce animation duration |
translateX / scale の値 | — | adjust intensity in keyframes |
実装コード Implementation Code
// react/M-008.jsx
import "./M-008.css";
import { useState } from "react";
export default function ShakeBounceFeedback({ onShake, onBounce }) {
const [shake, setShake] = useState(false);
const [bounce, setBounce] = useState(false);
const triggerShake = () => {
setShake(true);
setTimeout(() => setShake(false), 500);
onShake?.();
};
const triggerBounce = () => {
setBounce(true);
setTimeout(() => setBounce(false), 600);
onBounce?.();
};
return (
<>
<div className={"feedback-box shake" + (shake ? " animate-shake" : "")} onClick={triggerShake}>Error</div>
<div className={"feedback-box bounce" + (bounce ? " animate-bounce" : "")} onClick={triggerBounce}>Success</div>
</>
);
}/* react/M-008.css - keyframes same as above */import "./M-008.css";
import { useState } from "react";
export default function ShakeBounceFeedback({ onShake, onBounce }) {
const [shake, setShake] = useState(false);
const [bounce, setBounce] = useState(false);
const triggerShake = () => {
setShake(true);
setTimeout(() => setShake(false), 500);
onShake?.();
};
const triggerBounce = () => {
setBounce(true);
setTimeout(() => setBounce(false), 600);
onBounce?.();
};
return (
<>
<div className={"feedback-box shake" + (shake ? " animate-shake" : "")} onClick={triggerShake}>Error</div>
<div className={"feedback-box bounce" + (bounce ? " animate-bounce" : "")} onClick={triggerBounce}>Success</div>
</>
);
}:root {
--shake-duration: 0.5s;
--bounce-duration: 0.6s;
}
.feedback-box {
padding: 16px 24px;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
border: 2px solid transparent;
}
.feedback-box.shake {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
.feedback-box.bounce {
background: #f0fdf4;
color: #15803d;
border-color: #bbf7d0;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
20%, 40%, 60%, 80% { transform: translateX(6px); }
}
@keyframes bounce-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
.feedback-box.animate-shake {
animation: shake var(--shake-duration) ease-in-out;
}
.feedback-box.animate-bounce {
animation: bounce-in var(--bounce-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
A CSS animation class is added to the element via JavaScript on the triggering event (error, success, click). The @keyframes animates translateX or translateY in a rapid back-and-forth pattern. An animationend event listener removes the class so the animation can be re-triggered on the next event.
トリガーイベント（エラー・成功・クリック）時にJavaScriptがCSSアニメーションクラスを要素に追加。@keyframesでtranslateXまたはtranslateYを素早く往復させます。animationendイベントリスナーがクラスを削除し、次のイベントで再トリガーできるようにします。
カスタマイズ方法Customization
Adjust the translateX magnitude in @keyframes for a subtle twitch or a dramatic shake. Swap translateX for translateY and scale to create a bounce-up feedback. Change animation-duration for a snappier (100ms) or slower (500ms) feel.
@keyframesのtranslateX量で細かいヒクつきから大きなシェイクまで調整。translateXをtranslateYとscaleに変えてバウンスアップのフィードバックに。animation-durationでスナッピー（100ms）またはスロー（500ms）な感触に変更。
注意点Caveats
Always pair shake animations with a visible error message or color change — motion alone is not a sufficient accessibility signal. Apply prefers-reduced-motion to skip the animation while still showing the error state visually.
シェイクアニメーションは常に可視エラーメッセージまたは色変更と組み合わせてください。動きだけではアクセシビリティ上十分なシグナルではありません。prefers-reduced-motionでアニメーションをスキップしつつ、エラー状態を視覚的に表示してください。
よくある質問 Frequently Asked Questions
How to customize the shake / bounce feedback? Shake / Bounce Feedbackをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the shake / bounce feedback in React? ReactでShake / Bounce Feedbackを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of shake / bounce feedback? Shake / Bounce Feedbackのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.