プリセット
@keyframes cssap-anim {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
.preview {
animation: cssap-anim 800ms cubic-bezier(0.42,0,0.58,1) 0ms infinite;
}機能の説明
CSS アニメーションプレイグラウンドでは、CSS アニメーションをブラウザー上でライブにデザインしてプレビューできます。アニメーションさせるプロパティ（move、scale、fade、spin）を選び、duration と delay を調整し、ビルトインのイージングカーブを選ぶ - あるいはコントロールポイントのハンドルをドラッグして独自の cubic-bezier を作る - と、完成した @keyframes と animation の CSS が手に入り、そのままプロジェクトに貼り付けられます。すべてクライアント側で動くため、調整した内容がマシンの外へ出ることはありません。
使い方
- プロパティのセグメントコントロールで、何をアニメーションさせるかを選びます: Move（
translateX）、Scale、Fade（opacity）、Spin（rotate）。 - Duration (ms) と Delay (ms) を数値ステッパーで設定します。
- イージングのプリセット（Linear、Ease、In、Out、In-out）を選ぶか、Custom を選んでカーブエディターを開きます。
- カーブエディターでは、2 つのアクセントハンドルをドラッグして cubic-bezier を形作ります。ドラッグすると青いパスとプレビューが即座に更新されます。
- Iterations を Once と Loop で切り替えます。
- Play を押せば、いつでもプレビューを最初から再生できます。Reset でデフォルトに戻せます。
- 出力パネルから生成された CSS をコピーします。
例
軽快なフェード（ease-out、250ms、1 回）
@keyframes cssap-anim {
from { opacity: 1; }
to { opacity: 0.15; }
}
.preview {
animation: cssap-anim 250ms cubic-bezier(0,0,0.58,1) 0ms 1;
}カスタムイージング
Easing を Custom に設定し、1 つ目のハンドルを左下へ、2 つ目を右上へドラッグすると、素早く始まってゆったり着地する感触になります。生成される cubic-bezier(...) がそれに追従して更新されるので、自分の transition や animation ルールへそのままコピーしてください。
補足事項
- カスタムイージング: 単位ボックスの中の 2 つのアクセントハンドルをドラッグしてカーブを形作ります。ライブパスとプレビューが編集にリアルタイムで追従します。
- コピペ即利用可:
cssap-animキーフレームと.previewセレクターを自分のマークアップに合わせてリネームすれば、残りの CSS はそのまま本番で使えます。 - プライベート: ツール全体がブラウザー内で動きます - アニメーションパラメーターがサーバーへ送信されることはありません。
- 関連ツール:
Base64Base64An encoding representing binary data as 64 safe ASCII characters, so it survives transport through text-only channels. It encodes — it does not encrypt.
、JSON Formatter、その他の CSS & Layout シリーズ。