CSS의 @keyframes와 animation 속성을 활용하면 요소가 화면 왼쪽으로 튕겨 나가는 바운스 아웃 레프트(Bounce Out Left) 애니메이션 효과를 쉽게 구현할 수 있습니다. 이 효과는 요소가 살짝 오른쪽으로 이동한 뒤, 서서히 사라지면서 화면 왼쪽 밖으로 빠져나가는 동작을 만들어 줍니다.
동작 원리
바운스 아웃 레프트 애니메이션은 크게 세 단계로 구성됩니다.
0%: 요소가 원래 위치(translateX(0))에 있는 상태에서 시작합니다.
20%: 요소가 오른쪽으로 20px 이동하며 불투명도(opacity)가 1로 유지됩니다. 이 구간이 '바운스(튕김)' 느낌을 주는 핵심입니다.
100%: 요소가 왼쪽으로 -2000px만큼 이동하며 투명도가 0이 되어 화면에서 완전히 사라집니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 왼쪽으로 튕겨 나가며 사라지는 애니메이션을 확인할 수 있습니다. 페이지를 다시 불러오려면 '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 bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated bounceOutLeft"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>주요 속성 설명
animation-duration: 애니메이션이 완료되기까지 걸리는 시간을 설정합니다. 예제에서는 10초로 지정되어 있으며, 값을 줄이면 더 빠르게 동작합니다.
animation-fill-mode: both; 애니메이션이 시작 전과 종료 후에도 해당 프레임의 스타일을 유지하도록 합니다. 덕분에 애니메이션이 끝난 후 요소가 화면 밖으로 사라진 상태 그대로 유지됩니다.
-webkit- 접두사: Safari 등 일부 구형 웹킷 기반 브라우저와의 호환성을 위해 함께 작성해 두는 것이 좋습니다. 최신 브라우저에서는 표준 문법만으로도 정상적으로 동작합니다.
이처럼 @keyframes로 애니메이션 흐름을 정의하고, 클래스에 animation-name을 지정하는 방식만 익히면 다양한 방향의 바운스 아웃 효과(위, 아래, 오른쪽 등)도 손쉽게 확장해서 사용할 수 있습니다.