CSS 애니메이션을 활용하면 자바스크립트 없이도 다양한 시각 효과를 손쉽게 구현할 수 있습니다. 그중 바운스 인 레프트(Bounce In Left)는 요소가 화면 왼쪽 바깥에서 날아와 목표 지점에 도달한 후 살짝 튕기며 착지하는 듯한 역동적인 효과를 주는 애니메이션입니다.
바운스 인 레프트 애니메이션이란?
바운스 인 레프트 효과는 주로 페이지 로딩 시 로고나 배너, 중요 콘텐츠에 주목을 끌기 위해 사용됩니다. 요소가 처음에는 화면 왼쪽 밖(-2000px)에 위치하고 투명한 상태에서 시작해, 점점 나타나면서 오른쪽으로 이동한 뒤 몇 번의 반동을 거쳐 최종 위치에 안착하는 방식으로 동작합니다.
이 효과의 핵심은 @keyframes 규칙을 통해 애니메이션의 각 단계(0%, 60%, 80%, 100%)별로 요소의 위치(transform: translateX())와 투명도(opacity)를 조절하는 것입니다.
구현 예제 코드
아래 코드를 실행하면 이미지가 왼쪽에서 튕겨 나오는 애니메이션 효과를 확인할 수 있습니다.
<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 bounceInLeft {
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 bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceInLeft"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 상세 설명
1. 기본 스타일 설정 (.animated)
.animated 클래스는 애니메이션이 적용될 요소의 공통 스타일을 정의합니다. 배경 이미지를 설정하고, animation-duration으로 애니메이션 전체 지속 시간을 10초로 지정합니다. 또한 animation-fill-mode: both를 사용해 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일이 유지되도록 합니다.
2. 키프레임(@keyframes) 정의
bounceInLeft 키프레임은 네 단계로 구성되어 있습니다.
- 0%: 요소가 화면 왼쪽 바깥 2000px 위치에서 완전히 투명한(opacity: 0) 상태로 시작합니다.
- 60%: 요소가 완전히 불투명해지고(opacity: 1), 목표 지점을 30px 정도 지나쳐 이동합니다.
- 80%: 반동 효과로 인해 다시 왼쪽으로 10px 후퇴합니다.
- 100%: 최종적으로 원래 위치(translateX(0))에 안정적으로 자리 잡습니다.
3. 웹킷 접두사(-webkit-)의 의미
예제에는 @-webkit-keyframes와 @keyframes가 함께 작성되어 있습니다. 과거 사파리(Safari) 등 일부 브라우저에서 CSS 애니메이션을 지원하기 위해 필요했던 벤더 접두사입니다. 현재 대부분의 모던 브라우저는 표준 문법인 @keyframes만으로도 정상 동작하지만, 구형 브라우저 호환성을 고려한다면 두 가지를 함께 작성하는 것이 안전합니다.
애니메이션 재생 팁
예제 하단의 [Reload page] 버튼을 클릭하면 페이지가 새로고침되면서 애니메이션을 다시 확인할 수 있습니다. 개발 과정에서 애니메이션 효과를 반복해서 테스트할 때 유용하게 활용할 수 있습니다.
또한 실무에서는 지속 시간을 10초보다 짧게(예: 1~2초) 조정하는 것이 일반적입니다. animation-duration 값을 변경하거나, cubic-bezier() 타이밍 함수를 활용하면 더욱 세련된 바운스 효과를 만들 수 있습니다.