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

페이드 인 라이트 빅(Fade In Right Big)은 요소가 화면 오른쪽 바깥에서부터 서서히 나타나며 제자리로 이동하는 애니메이션 효과입니다. CSS의 @keyframes 규칙과 animation 속성만 활용하면 JavaScript 없이도 간단하게 구현할 수 있습니다.

작동 원리는 다음과 같습니다. 애니메이션 시작 시점(0%)에는 요소의 불투명도(opacity)를 0으로 설정하고 translateX(2000px) 값으로 화면 오른쪽 멀리 배치합니다. 종료 시점(100%)에는 불투명도를 1로 높이고 translateX(0)으로 원래 위치로 되돌립니다. 브라우저가 이 두 상태 사이를 부드럽게 이어 주기 때문에 자연스러운 등장 효과가 완성됩니다.

아래 예제를 실행하면 로고 이미지가 오른쪽에서 페이드 인되며 나타나는 모습을 확인할 수 있으며, [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 fadeInRightBig {
            0% {
               opacity: 0;
               -webkit-transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
         }

         @keyframes fadeInRightBig {
            0% {
               opacity: 0;
               transform: translateX(2000px);
            }
            100% {
               opacity: 1;
               transform: translateX(0);
            }
         }

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

   </head>
   <body>

      <div id="animated-example" class="animated fadeInRightBig"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

코드 설명

.animated 클래스 — 배경 이미지를 지정하고 애니메이션 지속 시간(10초)과 animation-fill-mode: both를 설정합니다. fill-mode를 both로 지정하면 애니메이션 시작 전과 종료 후에도 해당 프레임의 스타일이 유지됩니다.
@keyframes fadeInRightBig — 애니메이션의 시작(0%)과 끝(100%) 상태를 정의합니다. 구형 WebKit 기반 브라우저와의 호환성을 위해 -webkit- 접두사가 붙은 버전도 함께 작성했습니다.
.fadeInRightBig 클래스 — 위에서 정의한 키프레임을 실제 요소에 적용하는 역할을 합니다.
myFunction() 함수 — 버튼 클릭 시 location.reload()로 페이지를 다시 불러와 애니메이션을 재실행합니다.