웹 페이지에서 이미지나 요소가 서서히 사라지는 페이드 아웃(Fade Out) 애니메이션은 CSS만으로 손쉽게 구현할 수 있습니다. 핵심은 @keyframes 규칙으로 불투명도(opacity)의 변화를 정의하고, 이를 animation-name 속성으로 요소에 적용하는 것입니다.
CSS 페이드 아웃 애니메이션 예제
아래 코드는 로고 이미지가 10초에 걸쳐 서서히 사라지는 페이드 아웃 효과를 보여주는 완전한 HTML 예제입니다.
<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 fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 동작 원리 살펴보기
1. @keyframes로 애니메이션 정의
@keyframes fadeOut 규칙은 애니메이션의 시작(0%)과 끝(100%) 지점에서 요소의 상태를 정의합니다. 시작 시점에는 opacity: 1(완전히 불투명)이고, 종료 시점에는 opacity: 0(완전히 투명)가 되어 요소가 점진적으로 사라지는 효과가 만들어집니다.
2. 애니메이션 속성 설정
- animation-name: 적용할 keyframes 이름(fadeOut)을 지정합니다.
- animation-duration: 애니메이션이 완료되기까지 걸리는 시간을 설정합니다. 이 예제에서는 10초입니다.
- animation-fill-mode: both; 애니메이션이 끝난 후에도 최종 상태(opacity: 0)를 유지하도록 합니다.
3. 벤더 프리픽스(-webkit-)
-webkit- 접두사가 붙은 속성들은 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다. 최신 브라우저에서는 표준 속성만 사용해도 대부분 정상적으로 작동하지만, 더 넓은 브라우저 지원이 필요하다면 함께 작성하는 것이 좋습니다.
실행 결과 확인하기
위 코드를 HTML 파일로 저장한 후 브라우저에서 열면, 로고 이미지가 나타나자마자 10초 동안 천천히 사라지는 것을 확인할 수 있습니다. 페이지 하단의 [Reload page] 버튼을 클릭하면 페이지가 새로고침되어 애니메이션을 다시 볼 수 있습니다.
활용 팁
- 속도 조절:
animation-duration값을 변경하여 페이드 아웃 속도를 자유롭게 조절할 수 있습니다. 예를 들어2s로 설정하면 2초 만에 사라집니다. - 지연 시간 추가:
animation-delay속성을 사용하면 일정 시간 후에 애니메이션이 시작되도록 할 수 있습니다. - 부드러운 가속 곡선:
animation-timing-function: ease-in-out;을 추가하면 더욱 자연스러운 전환 효과를 얻을 수 있습니다.
이처럼 CSS 애니메이션을 활용하면 JavaScript 없이도 간단하고 성능 좋은 시각적 효과를 웹 페이지에 추가할 수 있습니다.