CSSパルス・鼓動アニメーション生成ツール
鼓動・パルス・グローリップルのCSSアニメーションを作成してコピー
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
ボタンやアイコンに使えるCSSパルスアニメーションを、キーフレームを手書きせずに作成できるツールです。鼓動（Heartbeat）、標準パルス、グローリップルの3種類のプリセットから選び、拡大比率・速度・イージング関数をプレビューを見ながら調整し、完成したCSSコードをワンクリックでコピーできます。処理はすべてブラウザ内で完結し、サーバーへの送信はありません。
使い方
- 鼓動、標準パルス、グローリップルのいずれかのプリセットを選択します。
- 拡大比率（Scale）と速度（Speed）のスライダーでアニメーションの強さと速さを調整します。
- イージング関数（Timing）をease、linear、cubic-bezierなどから選んで動きの質感を整えます。
- プレビューで結果を確認し、「CSSコピー」ボタンで生成された@keyframesコードをコピーします。
よくある質問
- 生成されたCSSはそのままプロジェクトに使えますか？
- はい。コピーした@keyframesと.pulsing-elementクラスをそのまま貼り付け、対象の要素にクラスを適用すればすぐに動作します。
- グローリップルでは拡大比率が調整できないのはなぜですか？
- グローリップルはbox-shadowが広がる効果を中心に設計されているため、拡大比率ではなく速度とイージング関数のみ調整できる仕様になっています。
- 鼓動プリセットはどうやって二回打つような動きを表現していますか？
- 0%、14%、28%、42%、70%、100%の各地点に異なるscale値を配置することで、小さく一回、大きく一回打つ二重の鼓動キーフレームを作っています。