CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 없이도 다양한 애니메이션 효과를 만들 수 있습니다. 그중 Bounce In Down(바운스 인 다운)은 요소가 화면 위쪽에서 아래로 떨어지며 통통 튀듯 착지하는 효과로, 로고나 배너 등에 시각적인 임팩트를 주고 싶을 때 유용하게 사용됩니다.
바운스 인 다운 애니메이션의 동작 원리
이 효과는 크게 네 단계로 구성됩니다.
- 0%: 요소가 화면 상단 밖(y축 -2000px)에 위치하며 투명한 상태(opacity: 0)로 시작합니다.
- 60%: 요소가 아래로 떨어져 나타나며(opacity: 1), 목표 지점보다 30px 아래까지 내려갑니다.
- 80%: 반동으로 인해 다시 10px 위로 튀어 오릅니다.
- 100%: 최종적으로 원래 위치(y: 0)에 안정적으로 착지합니다.
이처럼 중간에 위치를 오가는 구간을 넣으면 마치 공이 바닥에 부딪힌 후 튀어 오르는 듯한 자연스러운 바운스 효과를 연출할 수 있습니다.
예제 코드
아래 코드를 실행하면 이미지가 위에서 떨어지며 바운스되는 애니메이션을 확인할 수 있습니다. '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 bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
/* 표준 문법 */
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceInDown"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
1. .animated 클래스
애니메이션이 적용될 대상 요소의 기본 스타일을 정의합니다. animation-duration: 10s;는 애니메이션이 10초 동안 진행됨을 의미하며, animation-fill-mode: both;를 설정하면 애니메이션 시작 전과 종료 후에도 해당 프레임의 스타일이 유지됩니다.
2. @keyframes bounceInDown
애니메이션의 각 시점별 변화를 정의하는 핵심 부분입니다. -webkit- 접두사가 붙은 버전은 구버전 사파리, 크롬 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성한 것이며, 최신 브라우저에서는 표준 문법만으로도 충분히 동작합니다.
3. .bounceInDown 클래스
animation-name 속성으로 위에서 정의한 bounceInDown 키프레임을 요소에 연결합니다. HTML에서는 class="animated bounceInDown"처럼 두 클래스를 함께 지정하여 애니메이션을 적용합니다.
활용 팁
애니메이션 속도를 조절하고 싶다면 animation-duration 값을 변경하면 됩니다. 예를 들어 2s로 줄이면 더 빠르고 경쾌한 느낌을 줄 수 있습니다. 또한 animation-delay를 추가해 일정 시간 후에 애니메이션이 시작되도록 설정하거나, 여러 요소에 순차적으로 딜레이를 부여해 스태거(stagger) 효과를 연출할 수도 있습니다.