0%・50%・100%の固定3点で動きを組み立てる
CSSアニメーションでは，進行途中の状態を@keyframesの割合で指定します．このCSS アニメーション・キーフレームビルダーは，0%（開始），50%（中間），100%（終了）の3点に絞って編集する構成です．画面上部のボタンで編集点を選ぶと，その点に保存されている透明度，サイズ，回転，位置，角丸，背景色が各入力欄へ表示されます．
例えば，0%と100%のサイズ倍率を1.0，50%だけを1.5にすると，途中で大きくなって元へ戻る動きになります．0%を左側，50%を右側，100%を元の位置にすれば，往復するように見える移動も作れます．ただし，これはanimation-directionのalternateを指定する機能ではなく，3点の座標値で往復形状を表現したものです．
編集できる割合は固定されており，25%や75%の追加，既存点の削除，タイムライン上のドラッグには対応しません．複雑な多段階アニメーションを完成させる編集ソフトではなく，開始・中間・終了を見比べながら標準CSSの基本形を作るためのツールです．
7項目の値域とCSSへの変換
各キーフレームでは，opacity，scale，rotate，translateX，translateY，border-radius，background-colorを設定します．opacityは画面上で0〜100%として操作し，CSSには0〜1の数値で出力します．
scaleは0.5〜2.0倍，rotateは-360〜360度，translateXとtranslateYはそれぞれ-100〜100px，border-radiusは0〜50pxです．背景色はカラーピッカーまたは文字欄で指定します．
移動，回転，拡大縮小は，別々のCSS宣言ではなくtransformへまとめます．出力順はtranslate(Xpx, Ypx) rotate(deg) scale(倍率)です．例えばXを50px，Yを-30px，回転を90度，倍率を1.2にすると，transform: translate(50px, -30px) rotate(90deg) scale(1.2);の形になります．
opacity，border-radius，background-colorは独立した宣言として同じ割合のブロックへ入ります．
transform関数は記述順によって結果が変わる場合があります．このツールでは順番を変更する機能がないため，生成後にrotateとtranslateの順序を入れ替えると，プレビューとは異なる動きになる可能性があります．また，色の文字入力はCSSとして使える値を利用し，貼り付け後も対象ブラウザで表示を確認してください．
再生時間・イージング・繰り返しの共通設定
再生時間は0.5〜5.0秒を0.1秒刻みで調整します．この値は.animate-targetのanimation一括指定に秒単位で入ります．短くすると3点を速く通過し，長くすると変化をゆっくり確認できます．キーフレームごとに異なる時間を割り当てる機能はありません．
イージングはease，linear，ease-in，ease-out，ease-in-outの5種類です．linearは時間に対して一定の割合で進み，ease-inは始めを遅く，ease-outは終わりを遅く見せます．easeとease-in-outにも加減速がありますが，具体的な曲線はCSSの定義に従います．
cubic-bezierの4値を直接入力したり，曲線グラフを編集したりする機能はありません．
繰り返しは，スイッチをオフにした1回と，オンにしたinfiniteの二択です．任意の2回や3回，開始遅延，逆再生，交互再生，終了後の状態を指定する項目はありません．必要な場合はコピー後のCSSへanimation-delay，animation-direction，animation-fill-modeなどを追加します．
その際は，ツール内のプレビューと変更後コードの結果が一致しなくなるため，適用先で改めて確認してください．
生成される.animate-targetと@keyframesの読み方
出力は，アニメーションを要素へ割り当てる.animate-targetと，状態変化を定義する@keyframes custom-keyframesの二つで構成されます．.animate-targetのanimationには，名前，再生時間，選択したイージング，1またはinfiniteがこの順に入ります．
@keyframes側には0%，50%，100%の各ブロックがあり，画面で指定したtransform，opacity，border-radius，background-colorを確認できます．
利用するときはCSSコードをスタイルシートまたはstyle要素へ貼り付け，動かしたいHTML要素へanimate-targetクラスを付けます．既存プロジェクトで同名クラスやcustom-keyframesという名前をすでに使っている場合は，衝突を避けるために両方を同じ別名へ変更してください．要素側の既存animation宣言やtransform宣言との競合にも注意が必要です．
出力は標準CSSのみで，SCSS，LESS，Tailwind CSS，HTML，JavaScript，ベンダープレフィックス付きコード，圧縮コードは生成しません．コピーはClipboard APIを利用し，成功した場合だけ完了状態を表示します．ブラウザの権限や閲覧環境によりコピーできないときは，エラー案内に従ってコード欄から手動で選択してください．
プレビュー・一時停止・サンプルの使い方
設定値を変更するとCSS文字列が作り直され，ページ内のstyle要素を通してTargetと表示されたダミー要素へ適用されます．そのため，生成コードを別ファイルへ貼り付ける前に，3点のつながり，移動量，拡大率，色の変化を同じ画面で確認できます．一時停止中はanimation-play-stateをpausedにし，現在の進行位置でプレビューを止めます．再生すると同じ位置から続きます．
サンプルボタンは，0%から50%で半透明かつ1.5倍になり，100%で元の大きさと透明度へ戻る設定を読み込みます．途中で180度，終了時に360度まで回転し，背景色と角丸も変化します．終了値の360度は回転スライダーから再編集できます．サンプルは操作方法を確認するための初期例であり，複数のプリセットを管理・保存する機能ではありません．
プレビューは閲覧中のブラウザのCSS描画を利用します．滑らかさや実際のフレームレートは，端末性能，ブラウザ，同時に表示する要素数，適用先ページの処理負荷などで変わります．このツールはGPU利用，60fps，処理落ちのなさ，すべての環境で同じタイミングになることを保証しません．実運用前には，対象ブラウザと実際のページ上で表示を確認してください．
対応していない設定と追加実装の考え方
このツールは固定3点と基本的な7項目を扱うため，skew，filter，box-shadow，text-shadowなどはキーフレームへ追加しません．任意キーフレーム，独自のcubic-bezier，delay，任意回数，direction，alternate，fill-modeも画面から設定できません．
必要な宣言を生成後に加えることはできますが，CSSの組み合わせによって結果が変わるため，追加後の検証が必要です．
生成したアニメーションは，animate-targetクラスが付いた要素でページ表示後に動きます．hover，focus，クリック，スクロール位置などをきっかけに開始する仕組みは生成しません．hoverなら疑似クラス側でanimationを指定し，クリックならJavaScriptでクラスを着脱するなど，利用する画面の要件に応じた実装を別途行います．
また，複数要素を順番に動かすシーケンス，設定のファイル保存，履歴，取り消し，コードの読み込みと逆変換には対応していません．まず本ツールで基本形を作り，コピーしたCSSをプロジェクト側で命名・発火条件・詳細設定に合わせて調整する使い方が適しています．ページの初回読込などサイト利用に伴う通信まで存在しないという意味ではなく，完全オフラインや絶対的な安全性を保証するものでもありません．