CSS アニメーション生成ツール
フェード・バウンス・スライドなどのkeyframeアニメーションをプレビューしながらCSSを生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
フェード・スライド・ズーム・バウンス・パルス・シェイク・回転など、よく使うアニメーションをリアルタイムで再生しながら確認し、@keyframesとanimationプロパティを含む完成したCSSをコピーできます。再生時間・遅延・イージング・繰り返し回数をスライダーで合わせると、コードがすぐに変わります。
使い方
- タブでフェード・バウンスなどのアニメーションの種類を選びます。
- 再生時間・遅延・イージング(timing)・繰り返し回数を調整しながらプレビューで確認します。
- 「再生し直す」ボタンでいつでも最初から見直せます。
- 下のCSSをコピーして、目的の要素に.elementクラスで適用します。
よくある質問
- コピーしたCSSはどう使いますか?
- @keyframesの定義をスタイルシートに貼り付け、アニメーションを付けたい要素に.elementクラスを付けます。クラス名は好きなように変えてかまいません。
- 開始前・終了後の状態を保つには?
- 生成されたshorthandの末尾にboth(animation-fill-mode: both)がすでに含まれているので、再生前は最初のフレームを、終わった後は最後のフレームの状態を保ちます。
- 要素が画面に表示されたときだけ再生したいです。
- IntersectionObserverでスクロール表示を検知し、そのタイミングで.elementクラスを付ければできます。このツールが作るCSSは標準プロパティなのでそのまま動作しますが、実際のトリガーのロジックはプロジェクトで付け足す参考用のコードです。