CSS로 펄스(Pulse) 애니메이션 효과 만들기
CSS의 @keyframes 규칙과 animation 속성을 조합하면 요소가 천천히 확대되었다가 다시 원래 크기로 돌아오는 펄스(맥동) 효과를 간단하게 구현할 수 있습니다. 이 효과는 버튼, 알림 아이콘, 로고처럼 사용자의 시선을 끌고 싶은 요소에 특히 유용합니다.
아래 예제 코드를 실행하면 이미지가 주기적으로 맥동하는 모습을 직접 확인할 수 있습니다.
예제
<html>
<head>
<style>
.animated {
background-image: url(/css/images/logo.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated pulse"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 핵심 포인트
- @keyframes pulse: 진행률 0% → 50% → 100% 구간에서 scale 값을 1 → 1.1 → 1로 변화시켜 확대와 축소가 반복되는 애니메이션을 정의합니다.
- -webkit- 접두사: Safari 등 구형 웹킷 기반 브라우저에서도 동일하게 동작하도록 호환성 코드를 함께 작성했습니다.
- animation-duration: 10s: 한 사이클이 완료되는 데 걸리는 시간을 설정합니다. 값이 작을수록 맥동 속도가 빨라집니다.
- animation-fill-mode: both: 애니메이션이 시작되기 전과 종료된 후에도 지정된 스타일 상태가 유지되도록 합니다.
버튼을 클릭해 페이지를 새로 불러오면 애니메이션을 처음부터 다시 재생할 수 있습니다. scale(1.1) 값이나 지속 시간을 조절하면 원하는 강도와 속도의 펄스 효과를 자유롭게 연출할 수 있습니다.