CSS로 구현하는 바운스 업(Bounce Up) 애니메이션 효과 완벽 가이드

CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 없이도 요소가 아래에서 위로 튀어오르는 듯한 바운스 업(Bounce Up) 애니메이션 효과를 손쉽게 구현할 수 있습니다.

핵심 원리는 간단합니다. 요소를 화면 밖 아래쪽(translateY(2000px))으로 이동시킨 뒤, 투명도(opacity)를 조절하며 목표 위치까지 도달하는 과정에서 살짝 위로 튀었다가(translateY(-30px)) 다시 내려오는(translateY(10px)) 움직임을 keyframes로 정의하는 것입니다.

주요 코드 설명

animation-duration: 10s; — 애니메이션이 완료되기까지 걸리는 시간을 설정합니다.
animation-fill-mode: both; — 애니메이션 시작 전과 종료 후에도 스타일 상태가 유지되도록 합니다.
@keyframes bounceInUp — 애니메이션의 각 단계별 변화(위치, 투명도)를 정의합니다.
-webkit- 접두사 — 구버전 Safari 등 WebKit 기반 브라우저와의 호환성을 위해 사용됩니다.

전체 예제 코드

<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 bounceInUp {
  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 bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceInUp"></div>
<button onclick="myFunction()">Reload page</button>

<script>
function myFunction() {
  location.reload();
}
</script>
</body>
</html>

실행 결과 및 동작 방식

위 코드를 실행하면 로고 이미지가 화면 하단 바깥에서 시작해 서서히 나타나면서 위로 올라오고, 중간에 한 번 튕겨 올랐다가 살짝 가라앉은 후 최종 위치에 안정적으로 자리 잡습니다. 페이지 하단의 Reload page 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 반복해서 확인할 수 있습니다.

활용 팁

지속 시간(duration)을 1~2초 정도로 줄이면 더 역동적인 느낌을 줄 수 있습니다.
cubic-bezier() 이징 함수를 적용하면 바운스 곡선을 더욱 세밀하게 조정할 수 있습니다.
버튼, 카드, 모달 창 등 다양한 UI 요소의 등장 효과로 활용하기 좋습니다.