CSS의 @keyframes와 animation 속성을 활용하면 이미지가 화면 아래로 크게 이동하면서 서서히 사라지는 페이드아웃 다운 빅(FadeOutDownBig) 애니메이션 효과를 간단하게 구현할 수 있습니다. 이 효과는 요소의 불투명도(opacity)가 1에서 0으로 변하는 동시에 Y축 방향으로 2000px만큼 이동하는 방식으로 동작합니다.
핵심 속성 살펴보기
- animation-duration: 애니메이션이 완료되기까지 걸리는 시간을 설정합니다. 예제에서는 10초로 지정했습니다.
- animation-fill-mode: both; 애니메이션 시작 전과 종료 후에도 최종 스타일 상태가 유지되도록 합니다.
- @keyframes: 애니메이션의 시작(0%)과 끝(100%) 시점의 상태를 정의합니다.
- transform: translateY(): 요소를 세로(Y축) 방향으로 이동시키는 변형 함수입니다.
예제 코드
아래 코드를 실행하면 이미지가 화면 아래로 크게 이동하며 점차 사라지는 애니메이션 효과를 확인할 수 있습니다. '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 fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated fadeOutDownBig"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 작동 원리
.animated 클래스는 배경 이미지와 애니메이션의 기본 설정(지속 시간, fill-mode)을 담당합니다. @keyframes fadeOutDownBig은 시작 시점(0%)에는 요소가 제자리에 불투명하게 위치하고, 종료 시점(100%)에는 아래로 2000px 이동하면서 완전히 투명해지도록 정의합니다. 마지막으로 .fadeOutDownBig 클래스가 이 키프레임을 실제 요소에 적용합니다.
참고로 -webkit- prefixed 속성들은 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위해 포함된 것이며, 최신 브라우저에서는 표준 속성만으로도 정상적으로 동작합니다.