CSS의 @keyframes 규칙을 활용하면 이미지나 요소가 화면 위쪽으로 크게 이동하면서 서서히 사라지는 Fade Out Up Big 애니메이션 효과를 손쉽게 구현할 수 있습니다. 이 효과는 요소의 투명도(opacity)를 1에서 0으로 줄이는 동시에, 세로 위치를 -2000px만큼 위로 이동시키는 방식으로 동작합니다.
동작 원리
- opacity: 애니메이션 시작 시점(0%)에는 1(완전히 불투명), 종료 시점(100%)에는 0(완전히 투명)으로 설정됩니다.
- transform: translateY(): 요소를 Y축 방향으로 이동시킵니다. -2000px라는 큰 값은 요소가 화면 밖 위쪽으로 완전히 벗어나도록 만듭니다.
- animation-duration: 애니메이션이 진행되는 총 시간을 지정합니다. 아래 예제에서는 10초로 설정했습니다.
- animation-fill-mode: both: 애니메이션 시작 전과 종료 후에도 해당 스타일 상태가 유지되도록 합니다.
또한 구형 WebKit 기반 브라우저(Safari 등)와의 호환성을 위해 -webkit- 접두사가 붙은 속성들을 함께 작성해 주는 것이 좋습니다.
예제 코드
아래 예제를 실행하면 로고 이미지가 10초에 걸쳐 위쪽으로 이동하며 천천히 사라지는 것을 확인할 수 있습니다. 페이지를 다시 불러오려면 하단의 버튼을 클릭하세요.
<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 fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated fadeOutUpBig"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 설명
- .animated 클래스: 배경 이미지와 애니메이션의 공통 설정(지속 시간, fill-mode 등)을 담당합니다.
- @keyframes fadeOutUpBig: 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 투명도 감소와 함께 Y축 -2000px 이동이 적용됩니다.
- .fadeOutUpBig 클래스: 정의한 keyframes를 실제 요소에 연결하는 역할을 합니다.
- 버튼과 스크립트: 클릭 시
location.reload()를 호출해 페이지를 새로고침함으로써 애니메이션을 다시 재생할 수 있습니다.
이처럼 CSS만으로도 자바스크립트 라이브러리 없이 부드러운 페이드 아웃 애니메이션을 구현할 수 있으며, 이동 거리나 지속 시간 값을 조절해 다양한 변형 효과를 만들어 볼 수 있습니다.