CSS アニメーション生成ツールとは？

無料のオンライン CSS アニメーション生成ツール。ビジュアルエディターで CSS キーフレームアニメーションを作成。

CSSアニメーションは、動き、視覚的なフィードバック、魅力的なトランジションでWebインターフェースに命を吹き込みます。微妙なホバー効果から注目を集めるローディングインジケーターまで、キーフレームアニメーションはモダンなWebデザインに欠かせません。CSSアニメーションジェネレーターは、タイミング、イージング、繰り返し設定をカスタマイズできる10種類の既製キーフレームアニメーションを提供します。

バウンス、シェイク、パルス、スピン、フェードイン、左からのスライドイン、右からのスライドイン、フリップ、ウォブル、スイングから選べます。各アニメーションには専用の@keyframes定義があり、開始、中間、終了の状態を処理します。アニメーションを選択すると、デモ要素で即座にプレビューできます。

持続時間（1サイクルの長さ、0.1秒から10秒）、イージング関数（ease、ease-in、ease-out、ease-in-out、linear、またはカスタムのcubic-bezier値）、遅延（アニメーション開始前の時間、0秒から5秒）、繰り返し回数（1、2、3、infinite、またはカスタム）、方向（normal、reverse、alternate、alternate-reverse）を調整できます。

ライブプレビューはデモ要素でアニメーションを再生し、現在の@keyframesコードを完全なCSSと一緒に表示します。@keyframesルールとanimationプロパティの両方を含む完全なアニメーションコードをワンクリックでコピーできます。生成されたコードはベンダープレフィックス不要の構文を使用しており、すべてのモダンブラウザで動作します。