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

CSSアニメーションは、CSSの@keyframes規則とanimationプロパティを使って、要素の算出値を時間に沿って変化させる仕組みです。再生時間、遅延、繰り返し、イージングをCSSで指定できます。

本ツールは32種類のプリセットをCSSとHTML使用例として生成します。生成CSSはkeyframe名へnantoo-接頭辞を付け、prefers-reduced-motion: reduceでは動きを停止します。退場は非表示、下線はホバー・キーボードフォーカス時に表示するため、動きを減らしても機能上の最終状態は維持します。

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

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

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

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

@keyframes nantoo-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fadeIn {
  animation: nantoo-fadeIn 0.6s ease-out 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .fadeIn { animation: none !important; }
}

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