CSS만으로 요소가 위로 튀어 오른 뒤 화면 밖으로 사라지는 바운스 아웃 업(Bounce Out Up) 애니메이션 효과를 구현할 수 있습니다. 이 효과는 @keyframes 규칙을 사용해 요소의 위치(transform)와 투명도(opacity)를 시간의 흐름에 따라 변화시키는 방식으로 만듭니다.
동작 원리
바운스 아웃 업 애니메이션은 크게 세 단계로 진행됩니다.
0%: 요소가 원래 위치에 그대로 있습니다.
20%: 요소가 아래로 20px 살짝 내려가며 마치 바닥을 눌러 담금질하는 듯한 느낌을 줍니다.
100%: 요소가 위쪽으로 2000px 급격히 이동하면서 투명해져 화면에서 사라집니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 바운스 아웃 업 효과와 함께 사라지는 것을 확인할 수 있습니다.
<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 bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated bounceOutUp"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
.animated 클래스에는 애니메이션의 지속 시간을 설정하는 animation-duration: 10s;와, 애니메이션이 끝난 후 최종 상태를 유지하도록 하는 animation-fill-mode: both;가 적용되어 있습니다.
@keyframes bounceOutUp은 실제 애니메이션의 각 구간별 상태를 정의하며, -webkit- 접두사가 붙은 버전은 구버전 Safari 등 웹킷 기반 브라우저와의 호환성을 위해 함께 작성했습니다.
마지막으로 .bounceOutUp 클래스에 animation-name 속성으로 키프레임을 연결하고, 해당 클래스를 요소에 지정하기만 하면 애니메이션이 자동으로 재생됩니다. 페이지 하단의 Reload page 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 다시 확인할 수 있습니다.