CSSアニメーション生成ツール
プリセットを選んで再生時間・イージング・遅延・繰り返し・方向を調整するだけ。動くプレビューを見ながら@keyframesとanimationのCSSを生成・コピーできます。
プレビュー
WAZA
s
s
生成されたCSS
使い方
1
プリセットを選ぶ
フェード・スライド・バウンス・回転・パルスなどのプリセットから、作りたい動きをクリックして選びます。
2
動きを調整する
再生時間・イージング・遅延・繰り返し回数・方向・終了状態を調整し、プレビューで動きをリアルタイムに確認します。
3
CSSをコピーして使う
生成された@keyframesとanimationのCSSをコピーボタンでコピーし、そのままスタイルシートに貼り付けて利用します。
CSSアニメーション生成ツールとは
CSSの@keyframesアニメーションを視覚的に作成できるWebツールです。プリセットを選び、再生時間やイージングなどのパラメータを調整するだけで、動くプレビューとともにそのまま使えるCSSコードを出力します。すべての処理はお使いのブラウザ内で完結し、入力内容がサーバーに送信されることはありません。
機能・特徴
- 豊富なプリセットフェード・スライド・ズーム・バウンス・パルス・シェイク・回転など定番アニメーションをワンクリックで適用できます。
- リアルタイムプレビュー設定の変更が即座にプレビューへ反映。再生ボタンで何度でも動きを確認できます。
- そのまま使えるCSS@keyframesとanimationショートハンドをまとめて出力。コピーしてスタイルシートに貼るだけで動きます。
- プライバシー保護すべての処理はブラウザ内で完結。外部ライブラリも使わず、データを送信しません。
活用シーン
- ボタンやカードのホバー・登場アニメーション
- ヒーローセクションやロゴの表示エフェクト
- ローディングスピナーやパルスの作成
- モーダル・トーストのスライドイン演出
- CSSアニメーションの学習・検証
よくある質問
CSSアニメーション生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
生成したCSSはそのままコピーして使えますか？
はい。@keyframesとanimationプロパティをまとめて出力するので、コピーボタンでコピーし、対象の要素のセレクタに貼り付けるだけで動作します。アニメーション名は自由に変更できます。
animation-fill-modeとは何ですか？
アニメーション再生前後の要素のスタイルを指定するプロパティです。forwardsは終了時の状態を維持し、backwardsは開始前から最初のキーフレームの状態を適用、bothは両方を適用します。フェードインなどで「終わったら消えてしまう」のを防ぐ際に便利です。
iteration-countを無限ループにできますか？
はい。「無限ループ（infinite）」にチェックを入れると、animation-iteration-countがinfiniteになり、パルスやスピナーのように動きが繰り返されます。回数を指定したい場合はチェックを外して数値を入力してください。
入力した内容はサーバーに保存されますか？
いいえ。すべての処理はお使いのブラウザ内（JavaScript）で完結し、設定内容や生成したCSSがサーバーに送信・保存されることはありません。外部ライブラリも使用していないため、安心してご利用いただけます。