どのようなプロパティをアニメーションできますか？

transform（translate、rotate、scale）、opacity、color、background-colorなど、アニメーション可能なCSSプロパティに対応しています。

パフォーマンスに影響する？

transformとopacityのアニメーションはGPUアクセラレーションが効くため高パフォーマンスです。width/height等のレイアウトプロパティは負荷が高くなります。

作成したアニメーションはブラウザに自動保存されます。名前を付けて複数管理可能です。

CSSアニメーションはブラウザが最適化してくれるためパフォーマンスが良く、簡単なアニメーションに向いています。複雑な制御にはGSAP等のJSライブラリが適しています。

CSSアニメーション（@keyframes）をGUIで作成できる無料ツールです。タイムライン上でキーフレームを追加し、イージングやプロパティを設定。プレビューで動きを確認しながら直感的に編集できます。

タイムライン編集

視覚的なタイムラインでキーフレームを管理

イージング設定

cubic-bezier曲線をカスタムで設定可能

@keyframes出力

完全なCSSアニメーションコードを出力

Webデザイナー

ファーストビューにフェードインやスライドアニメーションを入れたいとき

プリセットから選ぶだけでプロ品質のアニメーションCSSを生成

フロントエンドエンジニア

@keyframesの構文を毎回調べるのが手間なとき

GUIでキーフレームを設定し、完全なCSS animationコードを出力

UIデザイナー

イージング関数の違いを視覚的に比較したいとき

ease-in/out/cubic-bezierの動きをリアルタイムプレビューで確認

どのようなプロパティをアニメーションできますか？: transform（translate、rotate、scale）、opacity、color、background-colorなど、アニメーション可能なCSSプロパティに対応しています。
パフォーマンスに影響する？: transformとopacityのアニメーションはGPUアクセラレーションが効くため高パフォーマンスです。width/height等のレイアウトプロパティは負荷が高くなります。
アニメーションを保存できますか？: 作成したアニメーションはブラウザに自動保存されます。名前を付けて複数管理可能です。
JSのアニメーションとの違いは？: CSSアニメーションはブラウザが最適化してくれるためパフォーマンスが良く、簡単なアニメーションに向いています。複雑な制御にはGSAP等のJSライブラリが適しています。