CSS로 구현하는 바운스 인 라이트(Bounce In Right) 애니메이션 효과 완벽 가이드

CSS 애니메이션을 활용하면 자바스크립트 없이도 다양한 동적 효과를 손쉽게 구현할 수 있습니다. 이번 글에서는 요소가 화면 오른쪽에서 튀어오르듯 등장하는 바운스 인 라이트(Bounce In Right) 애니메이션을 CSS만으로 만드는 방법을 알아보겠습니다.

바운스 인 라이트 애니메이션이란?

바운스 인 라이트는 요소가 화면 밖 오른쪽에서 빠르게 들어온 뒤, 살짝 왼쪽으로 넘어갔다가 다시 제자리에 안착하는 탄성 있는 움직임을 표현하는 효과입니다. 주로 배너, 팝업, 로고 등장 연출에 활용되며 사용자의 시선을 사로잡는 데 효과적입니다.

핵심 원리: @keyframes와 translateX

이 애니메이션은 @keyframes 규칙을 사용해 진행률(%)별로 요소의 위치를 정의하는 방식으로 작동합니다.

0%: 요소가 화면 오른쪽 밖(translateX(2000px))에 있으며 투명한 상태(opacity: 0)로 시작합니다.
60%: 화면 안으로 들어오며 불투명해지고(opacity: 1), 목표 지점을 살짝 지나 왼쪽으로 -30px 이동합니다.
80%: 반대 방향으로 10px 되튕기며 바운스 감성을 더합니다.
100%: 최종적으로 원래 위치(translateX(0))에 안정적으로 배치됩니다.

이처럼 중간 지점에서 위치를 넘어섰다가 되돌아오는 구간을 만들면 마치 고무공이 튀는 듯한 자연스러운 탄성 효과를 얻을 수 있습니다.

전체 예제 코드

아래 코드를 그대로 복사해서 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 bounceInRight {
   0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
   }
   60% {
      opacity: 1;
      -webkit-transform: translateX(-30px);
   }
   80% {
      -webkit-transform: translateX(10px);
   }
   100% {
      -webkit-transform: translateX(0);
   }
}

@keyframes bounceInRight {
   0% {
      opacity: 0;
      transform: translateX(2000px);
   }
   60% {
      opacity: 1;
      transform: translateX(-30px);
   }
   80% {
      transform: translateX(10px);
   }
   100% {
      transform: translateX(0);
   }
}

.bounceInRight {
   -webkit-animation-name: bounceInRight;
   animation-name: bounceInRight;
}

</style>
</head>
<body>

<div id="animated-example" class="animated bounceInRight"></div>
<button onclick="myFunction()">Reload page</button>

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

코드 주요 포인트 살펴보기

1. 접두사(-webkit-)의 역할

-webkit- 접두사가 붙은 코드는 구형 Safari 및 일부 브라우저와의 호환성을 위한 것입니다. 최신 브라우저 대부분은 표준 @keyframes와 animation 속성을 지원하지만, 안정적인 호환성을 위해 두 버전을 함께 작성하는 것이 좋습니다.

2. animation-fill-mode: both

animation-fill-mode: both를 설정하면 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일이 유지됩니다. 덕분에 애니메이션이 끝난 후 요소가 원래 위치에 자연스럽게 머물게 됩니다.

3. 애니메이션 속도 조절

animation-duration: 10s 값은 애니메이션이 완료되는 데 걸리는 시간입니다. 이 값을 1s~2s로 줄이면 더 빠르고 역동적인 느낌을, 늘리면 부드럽고 여유로운 연출이 가능합니다. 실무에서는 보통 1초 내외의 값을 많이 사용합니다.

마무리

CSS의 @keyframes와 transform만으로도 복잡한 라이브러리 없이 매력적인 바운스 애니메이션을 구현할 수 있습니다. 위 예제의 키프레임 구간별 수치를 조정하면 바운스 강도나 방향을 자유롭게 변형할 수 있으니, 다양한 값으로 실험해 보며 자신만의 애니메이션을 만들어 보시기 바랍니다.