CSSアニメーション生成＆キーフレームメーカー
Webアニメーション効果をコードなしで作成しよう。fadeIn、fadeOut、slideIn、bounce、pulse、spin、shake、flipなど14種類以上のプリセットからすぐに使える。再生時間、イージング（加速度）、遅延、繰り返し回数まで細かく調整して、リアルタイムプレビューで確認してから、キレイな@keyframes CSSをコピーするだけ。
1こんな時に使えます
💡Webページ要素に登場・退場アニメーションを追加
💡ボタンやCTAに注目エフェクトを追加
💡CSSローディングスピナー・ローダーを作成
💡コーディング前にマイクロインタラクションをプロトタイピング
💡カードや画像にホバーアニメーションを適用
2特徴
- 14種類以上のアニメーションプリセット（fade、slide、bounce、spin等）
- リアルタイムライブプレビュー—変更を即座に確認
- 再生時間・遅延・イージング・繰り返し回数・方向を完全カスタマイズ
- @keyframes + animationショートハンドをキレイに出力
- ワンクリックでコピー＆.cssファイルダウンロード
- オフライン動作—100%クライアント処理、データアップロードなし
3使い方
- プリセットライブラリから好きなアニメーション効果を選択
- 再生時間（速度）、遅延、イージングカーブを調整
- リアルタイムプレビューで変更を即座に確認
- CSSコードをコピー、または.cssファイルとしてダウンロード
よくある質問
Q. @keyframesコードを直接編集できる？
A. もちろん！生成されたCSSは自由に編集OK。コピーしてキーフレームの比率や属性値を好きなように変更できます。
Q. React、Vue、Tailwindでも使える？
A. はい！標準CSSなのでどのフレームワークでも使えます。CSSファイルに貼り付けるか、styled-componentsなどのCSS-in-JSでもそのまま使用可能。
Q. アニメーションとトランジションの違いは？
A. アニメーションは@keyframesで複数ステップの複雑なモーションを定義できます。トランジションは1つの状態から別の状態への単純な変化用。このツールはキーフレームアニメーション生成に特化しています。