ライブデモ Live Demo

左のボックスをクリックするとシェイク（エラー風）、右をクリックするとバウンス（成功風）が再生されます。

Click the left box to trigger shake (error style), the right to trigger bounce (success style).

0.5s
0.6s

AI向け説明 AI Description

`M-008` はフォームエラー時のシェイクと、送信成功時のバウンスを `@keyframes` で定義し、クラス付与で再生します。シェイクは `translateX` の往復、バウンスは `scale` のオーバーシュートで表現。Animista などのキーフレームベースのパターンと同系統です。

`M-008` defines shake (for errors) and bounce (for success) with `@keyframes`, triggered by adding a class. Shake uses alternating `translateX`; bounce uses scale overshoot. Same family as Animista-style keyframe patterns.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS

<div class="feedback-box shake" id="shakeEl">Error</div>
<div class="feedback-box bounce" id="bounceEl">Success</div>

<style>
@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 0.5s ease-in-out;
}

.feedback-box.animate-bounce {
  animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
</style>

<script>
document.getElementById('shakeEl').addEventListener('click', function() {
  this.classList.remove('animate-shake');
  void this.offsetHeight;
  this.classList.add('animate-shake');
  setTimeout(() => this.classList.remove('animate-shake'), 500);
});
</script>

React (JSX + CSS)

// 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 */

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

再実行する場合は一度クラスを外して reflow を挟むか、`animation-name` を一時変更してから戻すと確実に再生されます。参考: Animista (animista.net)。

To replay, remove the class and trigger reflow, or briefly change `animation-name`. Reference: Animista.