CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 없이도 다양한 애니메이션 효과를 손쉽게 구현할 수 있습니다. 그중 바운스 아웃(Bounce Out) 효과는 요소가 살짝 수축했다가 잠시 확장된 후, 점점 작아지면서 투명하게 사라지는 동작을 표현합니다. 버튼 클릭 피드백이나 요소 제거 연출 등에 유용하게 활용됩니다.
바운스 아웃 애니메이션의 동작 원리
바운스 아웃 효과는 애니메이션 진행률(%)에 따라 다음과 같은 단계로 변화합니다.
- 0%: 원래 크기(scale 1)에서 시작합니다.
- 25%: 살짝 수축하여 탄성을 준비합니다(scale .95).
- 50%: 불투명도를 유지하면서 크기를 확장해 튀어 오르는 느낌을 줍니다(scale 1.1).
- 100%: 크기가 크게 줄어들며(opacity 0, scale .3) 화면에서 사라집니다.
전체 예제 코드
아래 코드를 HTML 파일로 저장한 뒤 브라우저에서 실행하면, 로고 이미지가 바운스 아웃 효과와 함께 사라지는 것을 확인할 수 있습니다. 'Reload page' 버튼을 누르면 페이지가 새로고침되어 애니메이션을 다시 볼 수 있습니다.
<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 bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceOut"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>주요 속성 설명
1. animation-duration
애니메이션이 시작부터 끝까지 진행되는 총 시간을 지정합니다. 예제에서는 10s로 설정되어 있으며, 값을 줄이면 더 빠른 속도로 효과가 재생됩니다.
2. animation-fill-mode: both
애니메이션이 시작 전과 종료 후에도 키프레임의 스타일 상태를 유지하도록 합니다. 이 속성 덕분에 애니메이션이 끝난 후 요소가 최종 상태(투명하게 사라진 상태)를 그대로 유지합니다.
3. -webkit- 접두사
예제에는 -webkit- 접두사가 붙은 코드가 함께 작성되어 있습니다. 이는 구버전의 Safari, Chrome 등 웹킷 기반 브라우저와의 호환성을 위한 것으로, 최신 브라우저에서는 표준 문법만 사용해도 대부분 정상적으로 동작합니다.
활용 팁
- 속도 조절:
animation-duration값을 0.5s~1s 정도로 짧게 설정하면 실제 UI에서 자연스러운 인터랙션 피드백으로 활용하기 좋습니다. - 타이밍 함수 추가:
animation-timing-function에ease-in-out등을 지정하면 움직임이 더욱 부드러워집니다. - 요소 제거 연출: 목록 항목 삭제 시 바운스 아웃 효과를 적용하면 사용자에게 시각적인 완결감을 줄 수 있습니다.
이처럼 CSS만으로도 생동감 있는 바운스 아웃 애니메이션을 간단히 구현할 수 있습니다. 위 예제를 응용해 다양한 UI 인터랙션에 적용해 보세요.