CSSキーフレームアニメーションジェネレーター
ガイド
CSSキーフレームアニメーションジェネレーター
ライブプレビューを活用して、バウンス、シェイク、パルス、フェードイン、スライドイン、スピン、スイング、ラバーバンド、フラッシュ、ウォブなどの10のポピュラーなプリセットから選択またはカスタムキーフレームアニメーションを作成できます。タイミング、エイジング、繰り返し回数、方向、フィルモードを調整し、生成されたCSSコードをコピーできます。
使用方法
プリセットアニメーションまたはカスタムアニメーションを選択し、アニメーション設定（名前、持続時間、エイジング関数、繰り返し回数、方向、フィルモード）を構成します。キーフレームの停止を設定するためのパーセンテージ、CSS変換値、透過度を設定し、必要に応じてキーフレームの停止を追加または削除します。リアルタイムでライブプレビューが更新され、生成されたCSSコードをコピーできます。
機能
- 10のアニメーションプリセット – バウンス、シェイク、パルス、フェードイン、スライドイン、スピン、スイング、ラバーバンド、フラッシュ、ウォブが即時使用可能
- カスタムキーフレームエディタ – パーセンテージ、変換、透過度のコントロールでキーフレームの停止を追加、削除、編集できます
- ライブアニメーションプレビュー – アニメーションの変更をリアルタイムでデモ要素にプレビューできます
- 完全なアニメーション制御 – 持続時間、エイジング（カスタムcubic-bezierを含む）、繰り返し回数、方向、フィルモードを設定できます
- クリーンなCSS出力 – 生成された@keyframesルールとアニメーションショートハンドプロパティを、スタイルシートに貼り付ける準備ができます
よくある質問
-
CSS @keyframes とは何ですか？
CSS @keyframes はアニメーションシーケンスの段階を定義します。各キーフレームはアニメーションタイムライン上の特定のポイントでのスタイルを指定し、0%（開始）から100%（終了）のパーセンテージで表されます。ブラウザはキーフレーム間のプロパティ値を補間して、スムーズな遷移を作成します。
-
CSSトランジションとCSSアニメーションの違いは？
CSSトランジションは、2つの状態間のプロパティ変化（例：ホバー時）をアニメーションし、状態変化によってトリガーされます。CSSアニメーションは@keyframesを使用して自動的に実行され、ループ可能で、複数の中間ステップを持ち、animation-direction、iteration-count、fill-modeなどのプロパティでより多くの制御を提供できます。
-
アニメーションfill-modeプロパティはどのような機能を持ちますか？
アニメーションfill-modeプロパティは、アニメーションが実行される前後でスタイルがどのように適用されるかを制御します。「フォワード」はアニメーション終了後に最終キーフレームのスタイルを維持します。「バックワード」は遅延期間中に最初のキーフレームのスタイルを適用します。「両方」は両方の動作を適用します。「なし」は元の要素のスタイルに戻します。
-
cubic-bezierエイジング関数とは？
cubic-bezierエイジング関数は、4つのコントロールポイント（x1, y1, x2, y2）を使用してアニメーションの速度曲線をカスタムで定義します。これはアニメーションが異なる時間点でどれだけ速いか遅いかを決定します。ease、ease-in、ease-outなどの一般的なプリセットは、特定のcubic-bezier値のショートカットとして名前付けされています。
