CSS로 구현하는 페이드 인 라이트(Fade In Right) 애니메이션 효과

CSS 페이드 인 라이트 애니메이션이란?

페이드 인 라이트(Fade In Right)는 요소가 화면 오른쪽에서 살짝 밀려 들어오면서 동시에 서서히 나타나는 시각적 효과입니다. 웹 페이지의 로고, 배너, 콘텐츠 블록 등에 적용하면 정적인 화면에 역동감을 더하고 방문자의 시선을 자연스럽게 끌 수 있습니다.

이 효과는 JavaScript 없이 CSS의 @keyframes 규칙과 animation 속성만으로 손쉽게 구현할 수 있습니다. 핵심 원리는 다음 두 가지입니다.

opacity(투명도): 0에서 1로 변화시켜 요소가 서서히 보이도록 만듭니다.
transform: translateX(): 요소를 X축 방향으로 이동시켜 오른쪽에서 들어오는 느낌을 줍니다.

전체 예제 코드

아래 코드를 그대로 복사해서 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 fadeInRight {
            0% {
               opacity: 0;
               -webkit-transform: translateX(20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }
         @keyframes fadeInRight {
            0% {
               opacity: 0;
               transform: translateX(20px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

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

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

   </body>
</html>

코드 상세 설명

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

@keyframes 규칙은 애니메이션의 시작(0%)과 끝(100%) 지점에서 요소의 상태를 정의합니다.

0% 지점: opacity가 0(완전히 투명)이고, translateX(20px)로 오른쪽에서 20픽셀 떨어진 위치에서 시작합니다.
100% 지점: opacity가 1(완전히 불투명)이 되고, translateX(0)으로 제자리에 도착합니다.

즉, 요소가 오른쪽에서 왼쪽으로 20px 이동하며 동시에 선명해지는 효과가 완성됩니다.

2. .animated 클래스 — 공통 애니메이션 설정

animation-duration: 10s; 애니메이션이 10초에 걸쳐 진행됩니다. 더 빠른 효과를 원하면 값을 2s, 3s 등으로 줄여보세요.
animation-fill-mode: both; 애니메이션이 시작 전과 종료 후에도 시작/종료 프레임의 스타일을 유지하도록 합니다.
-webkit- 접두사가 붙은 속성들은 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다.

3. .fadeInRight 클래스 — 애니메이션 이름 연결

animation-name: fadeInRight;를 통해 위에서 정의한 @keyframes를 실제 요소에 적용합니다. HTML에서는 <div class="animated fadeInRight">처럼 두 클래스를 함께 지정하여 효과를 활성화합니다.

커스터마이징 팁

이동 거리 조절: translateX(20px)의 값을 50px, 100px 등으로 변경하면 더 큰 이동 효과를 낼 수 있습니다.
속도 조절: animation-duration 값을 짧게 하면 빠르고 경쾌한 느낌, 길게 하면 부드럽고 여유로운 느낌을 줍니다.
방향 반전: translateX 대신 translateY를 사용하면 위·아래 방향의 페이드 인 효과를 만들 수 있습니다.
재생 버튼: 예제의 "Reload page" 버튼은 location.reload()로 페이지를 새로 고침하여 애니메이션을 다시 재생하는 역할을 합니다.

이처럼 CSS 애니메이션만으로도 가볍고 성능 좋은 페이드 인 효과를 구현할 수 있으니, 프로젝트의 다양한 요소에 응용해 보시기 바랍니다.