웹 페이지에서 이미지나 요소가 서서히 나타나는 페이드 인(Fade In) 효과는 자바스크립트 없이 CSS만으로도 손쉽게 구현할 수 있습니다. 핵심은 @keyframes 규칙으로 애니메이션의 시작(투명도 0)과 끝(투명도 1) 상태를 정의하고, 이를 요소에 적용하는 것입니다.
CSS 페이드 인 애니메이션 예제 코드
아래 전체 예제를 실행하면 로고 이미지가 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 fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeIn"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 핵심 요소 살펴보기
1. @keyframes로 애니메이션 정의하기
@keyframes fadeIn은 애니메이션의 흐름을 정의합니다. 시작 지점인 0%에서는 opacity: 0(완전히 투명), 종료 지점인 100%에서는 opacity: 1(완전히 불투명)로 설정하여 요소가 점진적으로 나타나도록 만듭니다.
2. 벤더 프리픽스(-webkit-)의 역할
-webkit- 접두사가 붙은 속성들은 사파리(Safari) 등 구형 웹킷 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저 대부분은 표준 문법만으로도 정상 동작하지만, 더 넓은 브라우저 지원이 필요하다면 함께 작성하는 것이 안전합니다.
3. 주요 애니메이션 속성 설명
- animation-name: 적용할 @keyframes 이름을 지정합니다. 여기서는
fadeIn입니다. - animation-duration: 애니메이션이 완료되기까지 걸리는 시간입니다. 예제에서는
10s, 즉 10초로 설정되어 있습니다. - animation-fill-mode:
both로 설정하면 애니메이션 시작 전에는 첫 번째 키프레임 스타일(투명 상태)이, 종료 후에는 마지막 키프레임 스타일(불투명 상태)이 유지됩니다.
동작 확인 방법
예제 하단의 [Reload page] 버튼을 클릭하면 페이지가 새로고침되면서 페이드 인 애니메이션이 다시 재생됩니다. 이를 통해 효과를 반복해서 확인할 수 있습니다.
응용 팁
지속 시간을 조절하고 싶다면 animation-duration 값을 변경하세요. 예를 들어 2s로 줄이면 2초 만에 나타나는 빠른 페이드 인 효과를 얻을 수 있습니다. 또한 배경 이미지 대신 일반 <img> 태그나 텍스트 요소에 .fadeIn 클래스를 적용해도 동일한 효과를 사용할 수 있습니다.