直感的な操作でCSSキーフレームを生成
エントランス（登場）、アテンション（注目）、ループの3つのカテゴリに分けられた、12種類の厳選されたアニメーションプリセットを提供しています。画面上でduration（再生時間）やdelay（遅延）、イージング（変化の速度カーブ）を調整すると、リアルタイムでプレビューが更新されます。
すべての計算と描画はブラウザのJavaScript上でローカルに行われます。サーバーへのデータ送信や通信待ち時間は一切なく、安全かつ高速に作業を進めることができます。
アクセシビリティに配慮したコード出力
出力されるCSSコードには、キーフレーム（@keyframes）と、animation-fill-modeなどを含むアニメーション適用に必要なプロパティがすべて記述されており、そのままコピーして利用できます。
また、OSの設定で「視差効果を減らす」を選択しているユーザーに配慮し、自動的に@media (prefers-reduced-motion: no-preference)メディアクエリでラップされたコードを生成します。これにより、動きに敏感なユーザーの意図しない画面酔いを防ぐことができます。
滑らかな動きを実現するための注意点
本ツールはパラメータの調整に特化しており、完全なカスタムキーフレームの作成やJavaScriptベースのアニメーションには対応していません。プリセットの動きを微調整してプロトタイプやUI実装に活用する用途に適しています。
アニメーションを実装する際は、パフォーマンスに注意してください。width、height、topなどのレイアウトプロパティを動かすとブラウザのリフローが発生し、特にモバイル端末で動作がカクつく（ジャンクが発生する）原因となります。可能であればtransformやopacityを使用するプリセットを推奨します。
よくある質問
独自のカスタムアニメーションをゼロから作成することはできますか？
本ツールは事前に用意された12種類のプリセットに対するパラメータ（時間、遅延、繰り返し回数など）の調整に特化しています。キーフレームのパーセンテージを個別に編集するような、ゼロからの完全なカスタム作成には対応していません。
ReactやVueなどのフレームワーク用にエクスポートできますか？
本ツールが出力するのは標準的なピュアCSS（<code>@keyframes</code>とクラスのセット）のみです。ReactやVueで使用する場合は、生成されたCSSコードをコンポーネントのスタイルシートにそのまま貼り付けるか、CSS ModulesやStyled Componentsの構文に合わせて適宜書き換えてご利用ください。
コピーしたCSSは古いブラウザでも動作しますか？
生成されるコードは標準的なCSS3アニメーションの仕様に準拠しているため、モダンブラウザであれば問題なく動作します。ただし、ベンダープレフィックス（<code>-webkit-</code>など）は自動付与されないため、非常に古いブラウザをサポートする必要がある環境では、Autoprefixer等のツールを併用してください。
モバイル端末でアニメーションがカクつくのはなぜですか？
<code>top</code>や<code>width</code>といったレイアウトに影響を与えるプロパティをアニメーションさせると、ブラウザが毎フレーム画面の再計算を行うためです。滑らかな動作を実現するには、GPUで処理される<code>transform</code>（移動、回転、拡大縮小）や<code>opacity</code>（透明度）を使用するアニメーションを選択してください。
動きに敏感なユーザーへのアクセシビリティはどうなっていますか？
生成されるCSSコードはデフォルトで<code>@media (prefers-reduced-motion: no-preference)</code>内に記述されます。これにより、OSやブラウザの設定でアニメーションの無効化を希望しているユーザーに対しては、自動的に動きが停止する安全な設計となっています。
ツールの不具合や改善案はありますか。 フィードバックを送る