CSS 펄스/하트비트 애니메이션 생성기
심장 박동·펄스·글로우 링 CSS 애니메이션을 만들어 코드로 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
버튼이나 아이콘에 넣을 CSS 펄스 애니메이션을 클릭 몇 번으로 만들 수 있는 도구입니다. 심장 박동, 기본 펄스, 글로우 링 3가지 프리셋 중 골라 확대 비율·속도·가속도 함수를 조절하면 미리보기에서 바로 확인하고 완성된 CSS 코드를 복사할 수 있습니다. 모든 계산은 브라우저에서만 이루어지며 서버로 전송되는 데이터가 없습니다.
사용 방법
- 심장 박동, 기본 펄스, 글로우 링 중 원하는 프리셋을 선택합니다.
- 확대 비율(Scale)과 속도(Speed) 슬라이더로 애니메이션 강도와 빠르기를 조절합니다.
- 가속도 함수(Timing)를 ease, linear, cubic-bezier 등에서 선택해 움직임의 느낌을 다듬습니다.
- 미리보기에서 결과를 확인한 뒤 'CSS 복사' 버튼으로 완성된 @keyframes 코드를 복사합니다.
자주 묻는 질문
- 생성된 CSS를 그대로 내 프로젝트에 써도 되나요?
- 네, 복사한 @keyframes와 .pulsing-element 클래스를 그대로 붙여넣고 대상 요소에 클래스를 적용하면 바로 동작합니다.
- 글로우 링 효과는 왜 확대 비율 조절이 안 되나요?
- 글로우 링(Ripple) 프리셋은 box-shadow가 퍼져나가는 효과 위주로 설계되어 있어 확대 비율 대신 속도와 가속도 함수만 조절하도록 되어 있습니다.
- 심장 박동 프리셋은 어떤 방식으로 두 번 뛰는 느낌을 내나요?
- 0%, 14%, 28%, 42%, 70%, 100% 구간에 서로 다른 scale 값을 배치해 짧게 한 번, 크게 한 번 뛰는 이중 박동 키프레임을 만듭니다.