波紋・パルスアニメーションのCSSジェネレーター
ボタンやアイコンの注目度を高める、波紋が広がるようなパルスアニメーションをCSSのみで生成します。JavaScript不要で軽量です。
プレビュー
<div class="pulse-container">
<div class="pulse-dot"></div>
<div class="pulse-ring" style="--i: 0;"></div>
<div class="pulse-ring" style="--i: 1;"></div>
<div class="pulse-ring" style="--i: 2;"></div>
</div>.pulse-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: calc({{size}}px * {{scale_to}});
height: calc({{size}}px * {{scale_to}});
}
.pulse-dot {
width: {{size}}px;
height: {{size}}px;
background-color: {{dot_color}};
border-radius: 50%;
z-index: 2;
}
.pulse-ring {
position: absolute;
width: {{size}}px;
height: {{size}}px;
background-color: {{color}};
border-radius: 50%;
opacity: 0.8;
animation: pulse-animation {{speed}}s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
animation-delay: calc({{speed}}s / 3 * var(--i));
animation-play-state: {{play_state}};
}
.pulse-container:hover .pulse-ring {
animation-play-state: {{hover_state}};
}
@keyframes pulse-animation {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale({{scale_to}});
opacity: 0;
}
}機能、使い方
- 多重波紋エフェクト: CSSカスタムプロパティ
--iを活用し、1つのキーフレーム設定で時間差のある複数の波紋を表現しています。 - カスタマイズの自由度: サイズ、色、拡散する倍率、アニメーション時間をリアルタイムに微調整可能です。
- 幅広い用途: 通知バッジ、現在地マーク、ライブ配信中のアイコンなど、ユーザーの視線を誘導したい箇所に最適です。
- パフォーマンス: JavaScriptを一切使用せず、GPU負荷の低い
transformとopacityのみでアニメーションを実現しています。
CSSプロパティの説明
animation-delayとcalc()の組み合わせ
calc({{speed}}s / 3 * var(--i))を使用することで、全体の周期（アニメーション時間）を波紋の数で均等に割り、規則正しいリズムで次々と波紋が広がる演出を行っています。
cubic-bezierによる緩急
標準のeaseよりもメリハリのあるベジェ曲線を使用することで、中心から一気に広がり、外側でスッと消えていくリアルな波紋の質感を再現しています。
transform: scale()による最適化
幅（width）や高さ（height）を直接変更するのではなく、スケーリングを使用することで、ブラウザの再計算負荷を抑えつつ滑らかなアニメーションを実現しています。
