Pulse
パルス
どんな動き？
要素がゆっくりと拡大したのち元のサイズに戻る動作を一定のリズムで繰り返すループアニメーション。心臓の鼓動のように見えることから注目を集めやすく、通知バッジや新着ラベル、CTAボタンなどユーザーの目を引きたい箇所に使われる。多用すると煩わしく感じられるため使用箇所は絞るのが定石。
よく使う場所
通知バッジ新着ラベルCTAボタン
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Scale an element up and back down repeatedly, like a heartbeat, in a continuous loop.Trigger:
Load (starts automatically and loops continuously).
Initial state:
transform: scale(1)
Animation:
The element scales up slightly then eases back down to its original size, repeating at a steady rhythm.
Final state:
transform: scale(1) (loops back to start)
Timing:
duration: 1.6s, easing: ease-in-out, iteration-count: infinite.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (infinite)
別名・関連ワード
Pulse AnimationHeartbeat EffectBreathing Animation