CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 없이도 다양한 애니메이션 효과를 만들 수 있습니다. 이번 글에서는 요소가 위로 살짝 튀어 올랐다가 화면 아래로 사라지는 Bounce Out Down(바운스 아웃 다운) 애니메이션을 구현하는 방법을 알아보겠습니다.
Bounce Out Down 애니메이션의 동작 원리
Bounce Out Down 효과는 크게 세 단계로 구성됩니다.
- 0%: 요소가 원래 위치에 그대로 있는 상태
- 20%: 요소가 위쪽으로 20px 정도 튀어 오르며 불투명도(opacity)는 1로 유지
- 100%: 요소가 화면 아래쪽으로 2000px 떨어지면서 서서히 투명해져 사라짐
이처럼 keyframes의 각 지점에서 transform: translateY() 값과 opacity 값을 조절하면 통통 튀듯 내려가는 자연스러운 움직임을 연출할 수 있습니다.
예제 코드
아래 코드를 실행하면 로고 이미지가 바운스 아웃 다운 효과와 함께 화면 아래로 사라지는 것을 확인할 수 있습니다. '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 bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
</style>
</head>
<body>
<div id="animated-example" class="animated bounceOutDown"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>주요 속성 설명
animation-duration
애니메이션이 시작부터 끝까지 진행되는 총 시간을 설정합니다. 예제에서는 10초 동안 천천히 애니메이션이 재생되도록 지정했습니다. 값을 줄이면 더 빠르고 역동적인 효과를 얻을 수 있습니다.
animation-fill-mode: both
애니메이션이 시작 전과 종료 후에도 keyframes에서 정의한 스타일 상태를 유지하도록 합니다. 덕분에 애니메이션이 끝난 후에도 요소가 투명한 상태로 유지됩니다.
-webkit- 접두사
Safari 등 일부 구형 웹킷 기반 브라우저와의 호환성을 위해 -webkit- 접두사가 붙은 속성을 함께 작성했습니다. 최신 브라우저에서는 표준 속성만 사용해도 대부분 정상적으로 동작합니다.