CSS로 구현하는 페이드 아웃 다운(Fade Out Down) 애니메이션 효과 완벽 가이드

웹 페이지에서 요소가 서서히 사라지면서 아래쪽으로 이동하는 페이드 아웃 다운(Fade Out Down) 애니메이션은 CSS만으로 손쉽게 구현할 수 있습니다. 이 효과는 이미지나 배너가 화면에서 자연스럽게 사라질 때 주로 사용되며, @keyframes 규칙과 opacity, transform 속성을 조합하여 만듭니다.

페이드 아웃 다운 애니메이션의 동작 원리

이 애니메이션은 두 가지 핵심 속성을 활용합니다.

opacity: 1(완전히 보임)에서 0(완전히 투명)으로 변화시켜 요소를 서서히 사라지게 합니다.
transform: translateY(): Y축 방향으로 요소를 이동시켜 아래쪽으로 내려가는 움직임을 만듭니다.

또한 animation-fill-mode: both를 설정하면 애니메이션이 시작 전과 종료 후에도 최종 상태(투명 상태)가 유지됩니다.

구현 예제 코드

아래 예제는 이미지에 페이드 아웃 다운 애니메이션을 적용한 완전한 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 fadeOutDown {
            0% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateY(20px);
            }
         }

         @keyframes fadeOutDown {
            0% {
               opacity: 1;
               transform: translateY(0);
            }
            100% {
               opacity: 0;
               transform: translateY(20px);
            }
         }

         .fadeOutDown {
            -webkit-animation-name: fadeOutDown;
            animation-name: fadeOutDown;
         }
      </style>
   </head>
   <body>

      <div id="animated-example" class="animated fadeOutDown"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

코드 주요 부분 설명

1. 애니메이션 기본 설정 (.animated)

animation-duration: 10s는 애니메이션이 10초에 걸쳐 진행됨을 의미합니다. 이 값을 줄이면 더 빠르게 사라집니다. -webkit- 접두사가 붙은 속성은 구버전 Safari 등 WebKit 기반 브라우저와의 호환성을 위한 것입니다.

2. 키프레임 정의 (@keyframes fadeOutDown)

애니메이션의 시작 지점(0%)에서는 요소가 완전히 불투명한 상태(opacity: 1)로 제자리에 있고, 종료 지점(100%)에서는 완전히 투명해진 상태(opacity: 0)로 아래로 20px 이동합니다.

3. 애니메이션 적용 (.fadeOutDown)

animation-name 속성으로 정의된 키프레임을 실제 요소에 연결합니다. HTML에서 해당 클래스를 지정하기만 하면 페이지 로드 시 자동으로 애니메이션이 실행됩니다.

활용 팁

이동 거리를 조절하고 싶다면 translateY(20px)의 값을 변경하세요.
애니메이션 속도 곡선을 추가하려면 animation-timing-function: ease-in-out;을 사용하면 더욱 부드러운 움직임을 얻을 수 있습니다.
요소가 사라진 후 완전히 제거하고 싶다면 JavaScript의 animationend 이벤트와 함께 display: none을 활용할 수 있습니다.

이처럼 CSS 애니메이션을 활용하면 JavaScript 없이도 가볍고 부드러운 시각 효과를 구현할 수 있어, 페이지 성능 측면에서도 매우 유리합니다.