CSSキーフレーム生成器
バウンス、回転、パルス、振動、フェードから開始してフレームを編集します。再生ボタンで開始し、CSSと同じ値と区間イージングを使います。
キーフレーム
0%と100%を含む、重複しない2～20個の位置。変換順は移動→回転→拡大縮小。出力は位置順に並びます。
再生を押すとプレビューが始まります。いつでも停止でき、サンプルだけに適用されます。
使い方
使い方
- プリセットを選ぶか、0%と100%を含む2～20個のフレームを編集します。
- 時間、遅延、イージング、回数、方向、フィルモードを設定し、再生・停止します。
- CSSをコピー・保存し、animated-elementクラスを要素に適用します。
編集できるフレーム
各フレームで位置、移動、回転、倍率、不透明度を編集します。出力は位置順で両端が必要です。移動±500px、回転±3600度、倍率0～5、不透明度0～1。任意CSS属性や複数要素のタイムラインは編集しません。
時間とプレビュー
時間0.1～60秒、遅延0～60秒、1～100回または無限。標準5種とcubic-bezier、4種の方向とフィルモード。Web Animationsで再生ボタンから開始し、ページ非表示で停止します。プレビュー領域で形が切れる場合があります。
CSS出力
アップロードや依存は不要です。キーフレームとクラスを出力し、HTMLは含みません。組み合わせる際は両方の名前を変更してください。利用者に適した動きを確認し、必要なら動き軽減ルールを追加してください。
よくある質問
あわせて知りたいこと
各フレームを変更できますか？
はい。重複しない位置で追加、削除、変換・不透明度を編集できます。0%と100%を残してください。
自動再生しますか？
いいえ。再生ボタンで開始します。再生中の有効な変更は再開始し、停止中の変更では開始しません。