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