CSSアニメーション集（@keyframes）

CSSアニメーションは、CSSの@keyframes規則とanimationプロパティを使って、JavaScriptなしで要素に動きを付ける仕組みです。2012年にCSS Animations Level 1仕様が策定されて以来、すべての主要ブラウザでサポートされています。

本ツールは32種類の実用的なアニメーションを即座にコピペで使える形で提供します。すべてAnimate.css風の命名で、エンジニア・デザイナーに馴染みやすい設計です。

カテゴリ	用途	主なプリセット
注目喚起	ユーザーの注意を引く	shake, pulse, bounce, wobble, heartBeat, flash
登場	要素を表示する時	fadeIn, fadeInUp, slideInLeft, zoomIn, rotateIn, flipInX
退場	要素を隠す時	fadeOut, slideOutRight, zoomOut, flipOutY
ループ	継続的に動き続ける	spin, float, breathe, gradient, typing, blink
ホバー	:hoverトリガー用	lift, tilt, glow, underlineSweep
特殊	インパクト重視	jello, rubberBand, tada, swing

CSSアニメーションは2つの要素で構成されます。

1. @keyframes ブロック: アニメーションの中身（0%・50%・100%などで各時点の状態を定義）
2. animation プロパティ: 要素に適用するアニメーション名・再生時間・イージングなど

例えばfadeInの場合、以下のようなコードになります：

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.my-element {
  animation: fadeIn 0.6s ease-out forwards;
}

• linear: 等速。機械的な動き、ローディング回転などに
• ease: デフォルト。滑らかな標準的な動き
• ease-in: ゆっくり始まる。退場系に合う
• ease-out: ゆっくり終わる。登場系に最適
• ease-in-out: 両端ゆっくり。ループ系に自然
• cubic-bezier(0.68, -0.55, 0.27, 1.55): 反動付き（バウンス感）。tada、bounceなど
• steps(n): 段階的変化。タイピング風、カーソル点滅に