페이드 인 다운 애니메이션이란?
페이드 인 다운(Fade In Down)은 요소가 화면 위쪽에서 살짝 내려오면서 투명한 상태에서 점점 선명하게 나타나는 CSS 애니메이션 효과입니다. 로고, 배너, 제목 등 주요 요소에 적용하면 페이지가 한층 세련되고 동적인 느낌을 줍니다.
CSS에서 이 효과를 구현하려면 @keyframes 규칙으로 애니메이션의 시작(0%)과 종료(100%) 지점을 정의하고, animation-name 속성을 통해 대상 요소에 적용합니다. 핵심은 불투명도(opacity)와 위치(transform: translateY)를 함께 조절하는 것입니다.
전체 예제 코드
아래 코드를 실행하면 이미지가 위에서 아래로 내려오며 서서히 나타나는 모습을 확인할 수 있습니다. '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 fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeInDown"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
코드 핵심 설명
1. .animated 클래스
애니메이션이 적용될 요소의 기본 스타일을 정의합니다. animation-duration: 10s로 지속 시간을 10초로 설정했으며, animation-fill-mode: both를 지정해 애니메이션 시작 전과 종료 후에도 해당 스타일 상태가 유지되도록 했습니다. -webkit- 접두사는 구형 사파리(Safari), 크롬(Chrome) 브라우저와의 호환성을 위한 것입니다.
2. @keyframes fadeInDown
애니메이션의 흐름을 정의하는 부분입니다. 0% 지점에서는 opacity: 0(완전히 투명) 상태에서 translateY(-20px)만큼 위쪽에 위치하고, 100% 지점에서는 opacity: 1(완전히 불투명)이 되면서 원래 위치로 돌아옵니다. 이 두 상태의 변화 덕분에 요소가 위에서 아래로 내려오며 자연스럽게 나타나는 효과가 완성됩니다.
3. .fadeInDown 클래스
@keyframes로 정의한 애니메이션 이름을 실제 HTML 요소에 연결하는 역할을 합니다. 마크업에서 div 요소에 class="animated fadeInDown"처럼 함께 지정하면 애니메이션이 실행됩니다.
마무리 및 응용 팁
animation-duration 값을 조절하거나 translateY의 이동 거리를 변경하면 원하는 분위기의 애니메이션을 손쉽게 만들 수 있습니다. 또한 여러 요소에 animation-delay를 다르게 적용해 순차적으로 나타나게 하면 더욱 풍부한 연출도 가능합니다.