CSS만으로 페이드 아웃(Fade Out Up) 애니메이션 효과 구현하기

CSS의 @keyframes와 animation 속성을 활용하면 자바스크립트 없이도 이미지나 요소에 다양한 애니메이션 효과를 적용할 수 있습니다. 이번 글에서는 요소가 서서히 사라지면서 위로 이동하는 페이드 아웃 업(Fade Out Up) 효과를 구현하는 방법을 알아보겠습니다.

핵심 개념 정리

1. @keyframes — 애니메이션의 흐름 정의

@keyframes는 애니메이션이 진행되는 동안 특정 시점(0%, 100% 등)에서 요소가 어떤 상태여야 하는지를 정의합니다. Fade Out Up 효과에서는 시작 시점(0%)에 불투명도 1, 종료 시점(100%)에 불투명도 0으로 설정하고, 동시에 Y축 방향으로 -20px 이동시켜 위로 떠오르며 사라지는 느낌을 줍니다.

2. animation-duration — 재생 시간

애니메이션이 한 번 실행되는 데 걸리는 시간을 지정합니다. 예제에서는 10초(10s)로 설정하여 천천히 사라지는 효과를 연출합니다.

3. animation-fill-mode — 종료 후 상태 유지

both 값을 사용하면 애니메이션이 끝난 후에도 마지막 상태(완전히 투명해진 상태)가 그대로 유지됩니다. 이 속성이 없으면 애니메이션이 끝난 뒤 요소가 원래대로 돌아와 깜빡이는 것처럼 보일 수 있습니다.

전체 예제 코드

아래 코드를 HTML 파일로 저장한 뒤 브라우저에서 열면, 로고 이미지가 서서히 위로 이동하면서 사라지는 것을 확인할 수 있습니다. '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 fadeOutUp {
        0% {
          opacity: 1;
          -webkit-transform: translateY(0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translateY(-20px);
        }
      }

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

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

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

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

코드 설명

.animated 클래스: 배경 이미지를 지정하고, 애니메이션의 공통 설정(재생 시간, fill-mode)을 담당합니다.
@keyframes fadeOutUp: 불투명도(opacity)를 1에서 0으로, 그리고 translateY(-20px)를 통해 요소를 위로 20px 이동시키는 두 단계 변화를 정의합니다.
-webkit- 접두사: 구버전 Safari, Chrome 등 WebKit 기반 브라우저와의 호환성을 위해 함께 작성했습니다. 최신 브라우저에서는 표준 문법만으로도 대부분 동작하지만, 하위 호환성을 고려하면 접두사를 포함하는 것이 안전합니다.

마무리

이처럼 CSS 애니메이션은 몇 줄의 코드만으로 부드러운 화면 전환 효과를 만들어 줍니다. translateY 값을 조절하거나 animation-duration을 변경하면 원하는 분위기의 페이드 아웃 효과를 쉽게 응용할 수 있습니다. 페이드 인(Fade In), 페이드 아웃 좌/우(Fade Out Left/Right) 등 다른 변형 효과도 같은 원리로 만들어 보세요.