CSS 펄스 하트비트 애니메이션 수식과 동심원 파동 링 가이드

2026년 7월 23일

펄스와 하트비트가 필요한 이유

라이브 방송 상태 표시, 신규 가입 유도 버튼, 맥박 측정 결과 카드처럼 사용자가 놓치지 말아야 할 요소는 가만히 정지해 있는 것보다 리듬감 있게 움직일 때 더 눈에 잘 띕니다. 특히 심장 박동을 흉내 낸 이중 박동 모션이나 파동이 퍼져나가는 펄스 링은 지금 진행 중이라는 느낌을 시각적으로 전달하는 데 흔히 쓰입니다.

문제는 이 움직임을 keyframes로 직접 만들려면 여러 지점의 scale 값과 진행 시점을 손으로 하나하나 맞춰야 한다는 점입니다. 펄스 링은 크기와 투명도가 같은 속도로 변해야 자연스럽고, 하트비트는 여섯 개 지점의 비율이 서로 어긋나면 박동감이 뚝뚝 끊기는 것처럼 보입니다. 값을 하나 바꿀 때마다 브라우저를 새로고침하며 눈으로 확인하는 과정을 반복하다 보면 시간이 꽤 걸립니다.

동심원 펄스 링과 하트비트를 직접 만드는 방법

펄스 링 효과의 핵심은 원본 버튼 주위에 ::after 의사 요소로 같은 모양의 반투명 레이어를 겹쳐 둔 뒤, 애니메이션이 진행되는 동안 이 레이어의 크기(scale)는 점점 키우고 투명도(opacity)는 0.8에서 0으로 줄이는 것입니다. 크기와 투명도가 같은 리듬으로 함께 변하면서, 빛이 퍼져나가다 옅어지며 사라지는 파동처럼 보이게 됩니다.

하트비트는 여기서 한 단계 더 나아가 여섯 개 지점에 서로 다른 확대 비율을 배치합니다. 시작인 0% 지점은 scale(1)의 기준 크기이고, 14% 지점에서는 짧은 1차 피크로 살짝 팽창합니다. 이 1차 피크의 높이는 scaleShort = 1 + (scale - 1) × 0.4 라는 수식으로 정해지는데, 확대 비율(scale)을 1.2로 두면 scale(1.08)까지만 커집니다. 이어서 28% 지점에서는 scale(1)로 완전히 되돌아와 두 박동 사이의 짧은 휴지기를 만듭니다.

그다음 42% 지점에서는 사용자가 고른 확대 비율 값 그대로(예: scale(1.2))까지 다시 강하게 튕겨 2차 메인 피크를 찍고, 70%부터 100%까지는 다시 scale(1)의 원래 크기로 서서히 되돌아옵니다. 짧게 한 번, 크게 한 번 뛰는 이 리듬이 실제 심장 박동과 비슷한 느낌을 만듭니다.

다음은 동심원 파동 링과 하트비트, 두 가지 모션을 각각 구현한 HTML과 CSS 코드입니다.

<!-- 1. 라이브 상태 파동 펄스 링 버튼 -->
<button class="pulse-ring-btn">
  <span class="live-dot"></span> LIVE BROADCAST
</button>

<!-- 2. 심장 박동 하트비트 아이콘 -->
<div class="heartbeat-icon">❤️</div>

/* 1. 동심원 파동 펄스 링 스타일 */
.pulse-ring-btn {
  position: relative;
  padding: 12px 28px;
  font-weight: 700;
  color: #ffffff;
  background-color: #ef4444;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
}

.pulse-ring-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ef4444;
  border-radius: 9999px;
  z-index: -1;
  animation: pulse-wave 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse-wave {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* 2. 하트비트 이중 피크 박동 스타일 */
.heartbeat-icon {
  display: inline-block;
  font-size: 40px;
  animation: heartbeat-beat 1.3s ease-in-out infinite;
}

@keyframes heartbeat-beat {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.2); }
  70% { transform: scale(1); }
  100% { transform: scale(1); }
}

참고 매번 keyframes 비율과 scale 확장 수치를 직접 계산해서 타이핑하고 결과를 확인하는 대신, CSS 펄스/하트비트 애니메이션 생성기 도구를 쓰면 파동 속도, 확대 비율, 가속도 함수를 실시간으로 미리 보면서 완성된 CSS 코드를 바로 복사할 수 있습니다.

저희 도구로 확인하기. 심장 박동, 기본 펄스, 글로우 링 프리셋 중 하나를 고르고 확대 비율과 속도, 가속도 함수를 슬라이더로 조절하면 미리보기에서 바로 결과를 확인할 수 있습니다.

CSS 펄스/하트비트 애니메이션 생성기

원하시는 펄스 파동 속도와 확대 비율, 가속도 함수를 실시간 조절하고 최적화된 CSS 하트비트 스타일시트를 복사해 보세요.

하트비트 이중 박동 타임라인 한눈에 보기

1차 피크(14%)의 확대 폭은 사용자가 고른 확대 비율(scale)에 따라 scaleShort = 1 + (scale - 1) × 0.4 수식으로 정해지고, 2차 피크(42%)는 고른 scale 값을 그대로 사용합니다. 아래 표는 도구의 기본값인 scale 1.2를 기준으로 계산한 예시입니다.

진행 지점

스케일

의미

1.00

기준 크기

14%

1.08 (scale 1.2 기준, 수식으로 계산)

1차 피크(짧게 팽창)

28%

1.00

기준 크기로 완전히 복귀(휴지기)

42%

1.20 (고른 scale 값 그대로)

2차 메인 피크(강하게 튕김)

70%~100%

1.00으로 복귀

부드럽게 원래 크기로 돌아옴

실무에 적용할 때 참고할 점

transform과 opacity 위주로 작성합니다. 펄스 애니메이션에서 width, height 같은 속성을 직접 바꾸면 프레임마다 레이아웃 재계산(리플로우)이 발생합니다. 위 예시처럼 transform: scale()과 opacity 속성만 사용하면 GPU 가속을 받아 더 부드럽게 재생됩니다.
z-index로 겹침 순서를 정리합니다. ::after 파동 링이 퍼져나갈 때 버튼 안의 텍스트를 덮어버리지 않도록, 버튼에는 position: relative를, 링 요소에는 z-index: -1을 지정해 텍스트보다 뒤쪽에 위치하도록 합니다.

정리

펄스 링은 ::after 의사 요소의 크기를 키우고 투명도를 낮춰 파동이 퍼지다 사라지는 것처럼 보이게 만드는 애니메이션이고, 하트비트는 0·14·28·42·70·100% 여섯 지점에 서로 다른 scale 값을 배치해 이중 박동을 표현합니다.

두 효과 모두 transform과 opacity만으로 구현할 수 있어 레이아웃 재계산 없이 재생되며, position: relative와 z-index: -1을 함께 지정하면 텍스트나 아이콘이 파동 링에 가려지지 않습니다.

값을 하나씩 바꿔가며 브라우저에서 확인하는 대신, 프리셋과 슬라이더로 조절하고 바로 CSS를 복사하고 싶다면 아래 도구를 사용할 수 있습니다.

CSS 펄스/하트비트 애니메이션 생성기

원하시는 펄스 파동 속도와 확대 비율, 가속도 함수를 실시간 조절하고 최적화된 CSS 하트비트 스타일시트를 복사해 보세요.

자주 묻는 질문

생성된 CSS를 그대로 내 프로젝트에 써도 되나요?

네, 복사한 @keyframes 코드를 그대로 붙여넣고 대상 요소에 클래스를 적용하면 바로 동작합니다. 다만 위 예시는 이해를 돕기 위해 .pulse-ring-btn, .heartbeat-icon처럼 직접 이름 붙인 클래스이고, 아래 도구에서 실제로 복사하는 CSS는 기본적으로 .pulsing-element라는 클래스명으로 생성되니 프로젝트 상황에 맞게 클래스명만 바꿔 사용하면 됩니다.

글로우 링 효과는 왜 확대 비율 조절이 안 되나요?

글로우 링(Ripple) 프리셋은 box-shadow가 퍼져나가는 효과 위주로 설계되어 있어서, 확대 비율 대신 속도와 가속도 함수만 조절하도록 되어 있습니다. 펄스 링처럼 크기를 키우는 방식이 아니라 그림자 번짐으로 파동을 표현하기 때문입니다.

심장 박동 프리셋은 어떤 방식으로 두 번 뛰는 느낌을 내나요?

0%, 14%, 28%, 42%, 70%, 100% 여섯 구간에 서로 다른 scale 값을 배치해서 짧게 한 번, 크게 한 번 뛰는 이중 박동 키프레임을 만듭니다. 14%에서는 scaleShort = 1 + (scale - 1) × 0.4 수식으로 계산된 높이만큼 먼저 짧게 튀어 오르고, 28%에서는 scale(1)로 완전히 되돌아왔다가, 42%에서 사용자가 고른 scale 값 그대로 크게 튕긴 뒤 70%부터 100%까지 서서히 원래 크기로 돌아오는 흐름입니다.