Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

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

웹 페이지에 생동감을 더하는 대표적인 애니메이션 효과 중 하나가 바운스 인(Bounce In)입니다. 요소가 작은 크기에서 시작해 점점 커지며 살짝 튀어 오르듯 나타나는 이 효과는 CSS의 @keyframes와 animation 속성만으로 간단하게 구현할 수 있습니다.

바운스 인 애니메이션의 동작 원리

바운스 인 효과는 크기(scale)와 투명도(opacity)를 시간의 흐름에 따라 변화시키는 방식으로 만들어집니다. 일반적으로 다음과 같은 단계로 진행됩니다.

  • 0%: 요소가 투명한 상태(opacity: 0)에서 원본의 30% 크기로 시작합니다.
  • 50%: 완전히 불투명해지며 원본보다 약간 큰 105% 크기까지 확대됩니다.
  • 70%: 살짝 수축하며 통통 튀는 듯한 느낌을 줍니다(90% 크기).
  • 100%: 원래 크기(100%)에 안정적으로 자리 잡으며 애니메이션이 종료됩니다.

구현 예제 코드

아래 전체 코드를 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 bounceIn {
   0% {
      opacity: 0;
      -webkit-transform: scale(.3);
   }
   50% {
      opacity: 1;
      -webkit-transform: scale(1.05);
   }
   70% {
      -webkit-transform: scale(.9);
   }
   100% {
      -webkit-transform: scale(1);
   }
}

@keyframes bounceIn {
   0% {
      opacity: 0;
      transform: scale(.3);
   }
   50% {
      opacity: 1;
      transform: scale(1.05);
   }
   70% {
      transform: scale(.9);
   }
   100% {
      transform: scale(1);
   }
}

.bounceIn {
   -webkit-animation-name: bounceIn;
   animation-name: bounceIn;
}
</style>

</head>
<body>

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

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

코드 핵심 포인트 정리

1. 벤더 프리픽스(-webkit-)

예제에는 -webkit- 접두사가 붙은 속성이 함께 작성되어 있습니다. 이는 Safari 등 WebKit 기반 구형 브라우저에서도 애니메이션이 정상적으로 동작하도록 하기 위한 것으로, 최신 브라우저에서는 표준 속성만으로도 충분히 지원됩니다.

2. animation-fill-mode: both

animation-fill-mode: both를 지정하면 애니메이션이 시작되기 전과 끝난 후에도 해당 프레임의 스타일이 유지됩니다. 덕분에 애니메이션이 끝난 뒤 요소가 원래 상태로 튀어 되돌아가는 현상을 방지할 수 있습니다.

3. animation-duration 조절

예제에서는 10초로 설정되어 있지만, 실무에서는 보통 0.5초~1초 정도의 짧은 지속 시간을 사용하는 것이 자연스럽습니다. 값이 클수록 애니메이션이 느리게 진행됩니다.

4. 새로고침 버튼

애니메이션은 페이지 로드 시 한 번만 실행되므로, 예제에서는 location.reload()를 호출하는 버튼을 두어 효과를 반복해서 확인할 수 있도록 했습니다.

마무리

바운스 인 효과는 로딩 화면, 팝업 창, 아이콘 등장 등 다양한 UI 요소에 활용하기 좋은 애니메이션입니다. 위 예제의 @keyframes 백분율 값을 조정하면 튕기는 강도와 리듬을 자유롭게 변경할 수 있으니, 여러 값으로 실험해 보며 자신만의 스타일을 만들어 보세요.