CSS로 구현하는 Bounce Out Right(바운스 아웃 라이트) 애니메이션 효과

CSS의 @keyframes 규칙을 활용하면 별도의 JavaScript 없이도 다양한 애니메이션 효과를 손쉽게 구현할 수 있습니다. 이번 글에서는 그중 Bounce Out Right(오른쪽으로 튕겨 나가기) 효과를 적용하는 방법을 예제 코드와 함께 살펴보겠습니다.

Bounce Out Right 애니메이션이란?

Bounce Out Right는 요소가 화면에서 퇴장할 때 왼쪽으로 살짝 튕긴 뒤, 오른쪽 멀리 날아가면서 서서히 투명해지는 애니메이션입니다. 주로 알림 창이나 팝업 요소가 사라지는 장면에서 자연스럽고 역동적인 연출을 위해 사용됩니다.

예제 코드

아래 코드를 실행하면 로고 이미지에 Bounce Out Right 애니메이션이 적용되는 모습을 확인할 수 있습니다. 페이지 하단의 버튼을 클릭하면 새로고침되어 애니메이션을 다시 볼 수 있습니다.

<!DOCTYPE html>
<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 bounceOutRight {
   0% {
      -webkit-transform: translateX(0);
   }
   20% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
   }
   100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
   }
}

@keyframes bounceOutRight {
   0% {
      transform: translateX(0);
   }
   20% {
      opacity: 1;
      transform: translateX(-20px);
   }
   100% {
      opacity: 0;
      transform: translateX(2000px);
   }
}

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

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

코드 설명

@keyframes bounceOutRight: 애니메이션의 시점별 상태를 정의합니다. 0%에서는 원래 위치에 있다가, 20% 지점에서 왼쪽으로 20px 이동하며 불투명도(opacity)가 1로 유지되고, 100% 지점에서는 오른쪽으로 2000px 이동하면서 완전히 투명해집니다.
animation-duration: 10s; 애니메이션이 시작부터 끝까지 진행되는 총 시간을 10초로 설정합니다.
animation-fill-mode: both; 애니메이션이 시작하기 전과 끝난 후에도 해당 프레임의 스타일 상태를 유지하도록 합니다.
-webkit- 접두사가 붙은 속성은 구버전 Safari, Chrome 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성한 것입니다.

이처럼 @keyframes와 transform, opacity 속성만 조합하면 튕기듯 사라지는 역동적인 퇴장 효과를 간단하게 만들 수 있습니다. 이동 거리나 방향, 지속 시간 등의 값을 조절하여 다양한 변형 효과도 응용해 보세요.