アニメーションを手書きする前にキーフレームを視覚的に調整
カスタム keyframes はプリセットより柔軟ですが、最初から手で書くと試行錯誤の速度が落ちます。このツールなら開始・中間・終了状態を見ながら調整して、その後で使いやすい CSS をコピーできます。
こんな場面で便利です
遷移の試作、ブランドらしい動きの作成、複数パターンの比較に向いています。コード生成後は、実際の UI 上でも確認して、動きが自然に感じられるかを見ておくと安心です。
Tiny Online Tools

ライブプレビューを見ながら、カスタム CSS キーフレームを視覚的に作成してそのままコピーできます。
css
ライブプレビューを見ながらレスポンシブな CSS Grid レイアウトを作成できます。

ライブモーションプレビューを見ながら再利用できる CSS アニメーションを作成できます。

視覚的なコントロールでグラデーション文字スタイルを作成し、ライブプレビューとコピー用 CSS を表示します。

ライブプレビューでCSS clip-path形状を生成します。

音声ファイル(MP3、OGG、AAC、FLAC)を、サンプルレートやモノラル/ステレオ設定付きで WAV に変換します。

Replace one color in an image with another. Adjustable tolerance for color distance. Fully private, runs in your browser.

mph、km/h、m/s、ノット、ft/s、マッハ数を相互変換。リアクティブな多フィールド変換ツール。
無料オンラインツールの全コレクションを見る。
カスタム keyframes はプリセットより柔軟ですが、最初から手で書くと試行錯誤の速度が落ちます。このツールなら開始・中間・終了状態を見ながら調整して、その後で使いやすい CSS をコピーできます。
遷移の試作、ブランドらしい動きの作成、複数パターンの比較に向いています。コード生成後は、実際の UI 上でも確認して、動きが自然に感じられるかを見ておくと安心です。